<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if, v-show, v-for 指令</title> <script src="Vue.js"></script> </head> <body> <div id="root"> <!-- v-if :1.是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 2.是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做 3.有很高的切换开销，适用于条件不太容易改变的时候 v-show:1.不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换 2.有很高的初始渲染开销，适用于非常频繁地切换--> <div v-if="show"> if:hello </div> <div v-show="show"> show:hello </div> <!--监听事件可以用v-on指令监听Dom事件，v-on可以简写为@--> <button @click="btnclickhandle">toggle</button> <ul> <li v-for="item in list" :key="index">{{item}}</li> <li v-for="(item,index) in list" :key="index">{{index}}</li> </ul> </div> <script> new Vue({ el:"#root", data:{ show:true, list:[1,2,3,4] }, methods:{ btnclickhandle:function () { this.show=!this.show; } } }) </script> </body> </html>