1、v-text设置标签文本值：如果标签里面原来有值会被覆盖
<div id="first">
<h2 v-text="message + ‘!‘"></h2>
<h2 v-text="info + ‘!‘ "></h2>
<h2> {{ message + ‘!‘}}</h2>
</div>
<script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script>
var app = new Vue({
el: ‘#first‘,
data: {
message: ‘hello word!‘,
info: ‘你好!‘
}
})
</script>
2、v-html：如果data数据是纯文本，作用和v-txet一样，如果里面数据是标签，可以解析
3、v-on：绑定事件指令：可以使用@符号替代
<div id="first">
<input type="button" value="点我" v-on:click=‘doIt‘>
<input type="button" value="点我" @click=‘doIt‘>
<h2 @click=‘change‘>{{ message }}</h2>
</div>
<script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script>
var app = new Vue({
el: ‘#first‘,
data: {
message: ‘hello word!‘,
},
methods: {
doIt: function () {
alert(‘hello word‘)
},
change: function () {
this.message += ‘你好‘ // this关键字获取data中的数据
}
}
})
</script>
4、v-show：切换元素的显示状态：true/false
①、可以直接写：v-show=‘true’。
②、使用表达式：v-show=‘age > 18’。
5、v-if：根据表达式的真假切换显示状态，和show类似。
①、两者的不同：v-show改变的是display，标签依然还是在页面中，只是看不到；v-if是直接将标签从页面中删除。
②、使用场景：如果是要频繁切换显示状态的就用show。
6、v-bind：设置元素的属性：src、title、class等
①、v-bind可以简写为冒号 :
②、改变元素class建议写法：{active：isActive}：是否增加类名取决于后面的真假
<body>
<div id="first">
<img v-bind:src="imgSrc" >
<br>
<img :src=‘imgSrc‘ :title="imgTitle" :class=‘{active:isActive}‘ @click=‘change‘>
</div>
<script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script>
var app = new Vue({
el: ‘#first‘,
data: {
imgSrc: "http://www.itheima.com/images/logo.png",
imgTitle: "黑马程序员",
isActive: false
},
methods: {
change: function () {
this.isActive = !this.isActive
}
}
})
</script>
</body>
原文：https://www.cnblogs.com/wan520/p/14817371.html