一、v-if,v-show
<div id="root">
<div v-if="show">hello world</div>
<button @click="handleClick">toggle</button>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show;
}
}
})
</script>
区别:
1.v-if,div标签会被清除
2.v-show,div标签添加样式“display: none;”
二、v-for
<div id="root">
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
list: [1, 1, 3],
}
})
</script>
v-for="item of list"