一 代碼
<!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>
二 效果
