1、v-if/v-show指令
v-i: f删除和重新创建;v-if: 显示和隐藏。
<div id="demo">
<p v-if="seen">{{name}}</p>
</div>
<script>
new Vue({
el: '#demo',
data: {
seen: true,
name: 'seen为true'
}
});
</script>
2、v-for指令
使用v-for指令时,使用 :key 属性绑定唯一key时,在元素更新时可以重用元素,以提高效率。以下是遍历数组的列子:
<div id="demo">
<ul>
<li v-for="(v,k) in listmenu" :key="k">{{v.id}}号选手:{{v.name}}</li>
</ul>
</div>
<script>
new Vue({
el: '#demo',
data: {
listmenu: [
{
id: 1,
name: 'cindy'
},
{
id: 2,
name: 'bill'
},
{
id: 3,
name: 'linda'
}
]
}
});
3、v-on
用来绑定事件,格式是:v-on:事件=”函数”,如果函数不用传递参数,则可以不写小括号,只写函数名即可。
<div id="demo">
<button v-on:click="show">点我</button>
<button v-on:click="add()">想arr中添加666</button>
<br />
{{arr}}
</div>
<script>
new Vue({
el: '#demo',
data: {
arr: [1,2,3]
},
methods: {
show() {
console.log('show方法');
},
add() {
//使用this访问当前实力中得成员
this.arr.push(666);
}
}
});
</script>