本文介绍了Vue.js中两种常用的条件渲染方式：v-if和v-show的区别及使用场景，并展示了如何利用v-for指令实现列表的循环渲染。v-if适用于不需要频繁切换显示状态的情况，而v-show则适用于频繁切换显示和隐藏的需求。
<body>
<div id="root">
<!--v-if是将DOM节点删除然后再添加，当对应的数据项为false的时候会直接删除当前节点-->
<!--v-show是在不改变节点的情况下添加style="display: none;"-->
<!--当频繁的对DOM节点进行操作的时候，用v-show会更好-->
<!--用一次显示和隐藏的话 选用 v-if-->
<div v-if="show">hello world</div>
<div v-show="show">hello world</div>
<button @click="myclick">toggle</button>
<!--循环展示加上:key=""提升每项渲染性能 key值要求不同-->
<li v-for="(myli,index) of list" :key="index">{{myli}}</li>
<!--频繁对列表进行变更的时候不适用index-->
</div>
<script>
new Vue({
el:"#root",
data:{
show:true,
list:[1,2,3,4,5],
},
methods:{
myclick : function(){
this.show = !this.show;
}
}
})
</script>
</body>
截图：
效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
