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值，在对列表排序等操作的时候可能存在问题