<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-if，v-show，v-for指令</title> <script src="vue.js"></script> </head> <body> <!-- 在本代码中可以看出：v-if可以实现代码隐藏或者显示，但是它的实现方式是直接删除页面的代码或者加入代码（频率不大的时候可以使用这个）；而v-show的表现形式则不一样，它主要是用来修改代码的属性（性能会高一些） --> <div id="root"> <div v-show="show">Hello World</div> <button @click="showOrHide">点击显示或隐藏</button> <ul> <li v-for="(item,index) in list" :key="index"> {{index}} </li> </ul> <ul> <li v-for="(item,index) in books"> {{item.name}}的作者是{{item.author}} </li> </ul> </div> <script> new Vue({ el:"#root", data:{ show:true, list:[1,2,3], books:[ { name:'西游记', author:'张三' }, { name:'红楼梦', author:'李四' } ] }, methods:{ showOrHide:function () { this.show=!this.show; } } }) </script> </body> </html>