Vue学习（四）v-if、v-show、v-for
v-if:
v-if是一个指令，（逻辑与原生js一样，只是使用方法稍有不同）需要添加在元素上，如果想要添加在多个元素上，可以使用标签当成一个容器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue学习</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="root">
<div v-if="show">hello world</div>
<button @click="click">toggle</button>
</div>
</body>
<script>
new Vue({
el:"#root",
data:{
show:true,
},
methods:{
click:function(){
this.show=!this.show
}
}
})
</script>
</html>v-show 与 v-if 的使用方法一致，不同点在于，v-if在每一次切换是都会重新渲染，如果一开始的条件是false，则会等到第一次条件成立开始渲染。v-show 无论初始条件如何，都会渲染进来，改变的是DOM的 display ：none／block。如果需要多次渲染，使用v-show。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue学习</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="root">
<div v-show="show">hello world</div>
<button @click="click">toggle</button>
</div>
</body>
<script>
new Vue({
el:"#root",
data:{
show:true,
},
methods:{
click:function(){
this.show=!this.show
}
}
})
</script>
</html>v-for: v-for类似与js中的遍历，使用方法为v-for(item in items)，items是数组 item是数组中的元素。在 v-if与v-for一起使用时，v-for的权重更高。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue学习</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="root">
<ul>
<li v-for="item of list">{{item}}</li>
</ul>
</div>
</body>
<script>
new Vue({
el:"#root",
data:{
list:[1,2,3]
}
})
</script>
</html>本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-08-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读