vuejs里面v-if,v-show和v-for

<div id='root'>
　　<div v-if='show'>helle world</div>
　　<button @click='handleClick'>toggle</button>
</div>
<script>
　　new Vue({
　　　　el:'#root',
　　　　data:{
　　　　　　show:true
　　　　},
　　　　methods:{
　　　　　　handleClick:function(){
　　　　　　　　this.show = !this.show;
　　　　　　}
　　　　}
　　})
</script>

v-if，里面這個show是個變量，如果是true就是顯示，如果是false就不顯示，這里是移除了dom

 

<div id='root'>
　　<div v-show='show'>helle world</div>
　　<button @click='handleClick'>toggle</button>
</div>
<script>
　　new Vue({
　　　　el:'#root',
　　　　data:{
　　　　　　show:true
　　　　},
　　　　methods:{
　　　　　　handleClick:function(){
　　　　　　　　this.show = !this.show;
　　　　　　}
　　　　}
　　})
</script>

v-show，把v-show替換掉v-if，表現形式一樣，但是和v-if不同的是，v-show只是將dom隱藏，顯示，並沒有移除dom，只是把display的樣式變了

如果顯示的頻率大，v-show比v-if要性能高一些，因為不會去銷毀dom，和創建dom,如果顯示的頻率不是那么大，只要一次顯示隱藏，那么v-if是更好的選擇

 

 

<div id='root'>
　　<ul>
　　　　<li v-for='item of list' :key='item'>{{item}}</li>
　　</ul>
</div>
<script>
　　new Vue({
　　　　el:'#root',
　　　　data:{
　　　　　　list:[1,2,3]
　　　　}
　　})
</script>

v-for,當某個數據需要循環顯示的時候，可以用v-for,這里需要注意加:key，可以提升性能，但是這個item變量要是唯一的，如果數組是[1,1,3]，這個item就不能作為key值，需要將

v-for='item of list'

改成

v-for='(item,index) of list'，

將索引index作為key值，這樣是唯一的，但是index作為key值，在對列表排序等操作的時候可能存在問題