绑定一次
{{*msg}}
vue2.0已废弃 请使用v-once
绑定html代码
{{{msg}}}
{{{msg}}}写法vue2.0已废弃,请使用v-html
循环v-for
数组
1.0默认通过value进行遍历(key,value),遍历需加track-by="$index"(不加重复数据不绑定)
2.0通过key进行遍历(value,key)
data:{
arr:['苹果','橘子','香蕉']
}
{{value}} {{$index}}
{{{$index}}}写法vue2.0已废弃
对象
data:{
json:{name:'zfpx'}
}
{{value}}
{{$key}}和{{$index}}vue2.0已废弃
对象数组都可以进行解构赋值
v-for = '(val,index) in arr'
// 2.0 必须进行定义,不然会报错
事件v-on
按钮
{{value}}
var vue = new Vue({
el:'#box',
data:{
json:['香蕉','苹果','橘子']
},
methods:{
addFruit(event){
this.json.push('苹果');
}
}
});
v-on:click简写@click 2.0支持
执行方法时加上()事件源默认不传递,需要手动传入$event
methods中的this永远指向Vue的实例
显示/隐藏
v-show 如果为false时通过css样式将元素隐藏 (display:none/block)
v-if 如果为false时移除DOM节点(removeChild)