鲁达 主要内容: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(){ !; } } }); </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(){ !; } } }); </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">{{i}}</li> </ul> </div> <script> new Vue({ el: "#root", data: { list: [{ "i": "开森" }, { "i": "开森开森极了" }, { "i": "真呀么真开心~" }, { "i": "你真棒！！！" }, { "i": "兄弟，你太好了！" } ] } }); </script>楚洁自话我又来啦~~上述均是自我的理解，如果有什么不对的地方，请留言指正我，多谢了~