小白自学Vue之v-if ,v-show,v-for自我总结第三篇！

主要内容:v-if 、v-show 、v-for

一、v-if

<div id="root">

<!--如何实现点击按钮进行显示隐藏切换呢？此时就要用到v-if,在需要显示隐藏的div中写上v-if="show"等于show这个变量。切换就是现在显示，我点击要隐藏；如果是不显示的，我点击后要显示出来，实现代码如下，跟我来看下吧！-->

  <div v-if="show">{{msg}}</div>

  <button @click="handClick">toggle</button>

</div>

<script>

  new Vue({

    el:"#root",

    data:{

      msg:"小丸子",

      show:true

     },

     methods:{

       handClick:function(){

         this.show=!this.show;

       }

     }

  });

</script>

---

二、v-show

<div id="root">

<!--如何实现点击按钮进行显示隐藏切换呢？除了上述的v-if之外，还可以使用v-show。在需要显示隐藏的div中添加v-show="show"，最后的事现效果你会发现和上面的一样，但是要注意观察。-->

  <div v-show="show">{{msg}}</div>

  <button @click="handClick">toggle</button>

</div>

<script>

  new Vue({

    el:"#root",

    data:{

      msg:"小丸子",

      show:true

     },

     methods:{

       handClick:function(){

         this.show=!this.show;

       }

     }

  });

</script>

相信经过上面2点后你会发现，v-if与v-show的在页面中的实现效果是一样的，但是当你调用的时候请仔细观察那个dom，即div。你会发现二者的区别：

v-if 隐藏是直接移除那个元素即此处的div，显示时则会重新创建一个div

v-show 隐藏不会移除dom元素，只是在div标签中加了一个display：none的css样式。要显示时移除该样式；

总结：顾推荐使用v-show更好

 

---

 

 

三、v-for

自我理解：就是需要循环加载数据是使用

 <div id="root">

   <!--想要实现list数据的循环加载显示在页面中怎么处理？实现代码如下-->

   <ul>

    <!--注意：1.用v-for的时候最好写上key属性，这样可以使每项循环的性能更好；并且远原来的v-for="item of list" 最好写成v-for="(item,index) of list" 并把此处的index的索引赋给key属性，代码如下所示-->

    <li v-for="(item,index) of list" :key="index">{{item.i}}</li>

   </ul>

  </div>

  <script>

   new Vue({

      el: "#root",

      data: {

       list: [{

         "i": "开森"

        }, {

         "i": "开森开森极了"

        }, {

         "i": "真呀么真开心~"

        }, {

         "i": "你真棒！！！"

        }, {

          "i": "兄弟，你太好了！"

         }

        ]

       }

      });

  </script>