版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/TDCQZD/article/details/82154872
一、基本介绍
v-if
v-else
v-else-if
v-show
v-for
二、代码示例：
1、v-if
代码案例：
<body>
<div id="app">
<p v-if="ok">v-if</p>
<p v-else>v-else</p>
<button @click="ok=!ok">click</button>
<!--<p v-text="!msg"></p>-->
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
ok:true,
msg:""
}
})
</script>代码运行测试结果：
2、v-show
代码案例：
<body>
<div id="app">
<p v-show="ok">show1</p>
<p v-show="!ok">show2</p>
<button @click="ok=!ok">click</button>
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
ok:true
}
})
</script>
代码运行测试结果：
3、v-for
代码案例：
<body>
<div id="app">
<div v-for="(item,index) in arr">
{{index}} ---> {{item.name}} : {{item.age}}
<button @click="del(index)">删除</button>
<button @click="updateInfo(index,{name:'wsc',age:50})">添加</button>
</div>
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
arr:[{name:"damu",age:18},{name:"zdy",age:19},{name:"sym",age:49}]
},
methods:{
del(index){
this.arr.splice(index,1)
},
updateInfo(index,obj){
//API 坑
// this.arr[index] = obj;
//this.arr=[];
this.arr.splice(index,1,obj)
}
}
})
</script>代码运行测试结果：
注意事项：
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength