vue垦荒记(2)--来一波指令

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>