版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
一 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if v-show v-for指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!-- 挂载点 -->
<div id="root">
<!-- v-if是移除组件 -->
<div v-if="show">移除dom组件</div>
<!-- v-show是隐藏组件，推荐用v-show，可以提高性能 -->
<div v-show="show">通过css隐藏dom组件</div>
<button @click="hanleClick">toggle</button>
<ul>
<!-- 数据循环展示用v-for，注意:循环中key不能重复，可以提示渲染性能 -->
<li v-for="(item,idx) of list" :key="idx">item{{idx}}:{{item}}</li>
</ul>
</div>
<script type="text/javascript">
// 实例
new Vue({
el: "#root",
data: {
show: true,
list: ["green", "yellow", "red"]
},
methods: {
hanleClick :function(){
this.show=!this.show
}
}
})
</script>
</body>
</html>二 效果
