1 <!DOCTYPE HTML> 2 <html lang="zh"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Vue</title> 6 <script src="../../vue.js"></script> 7 </head> 8 <body> 9 <!-- --------------------------------------Mr丶L----------------------------------------------- --> 10 <div id="root"> 11 <!-- 控制页面元素隐藏显示 --> 12 <!-- v-if 原理：会将对应前端语句注释掉（移除） 效率：少量优先 --> 13 <!-- <div v-if="show">hello world</div> --> 14 <!-- v-show 原理：会修改对应元素的display属性的值 效率：大量优先--> 15 <div v-show="show">hello world</div> 16 <button @click="handleClick">toggel</button> 17 <!-- ul利用v-for循环实现--> 18 <ul> 19 <!-- 此处 item 是一个变量，将list集合中的每一个下标元素赋值给item达到循环效果--> 20 <!-- :key 会提升渲染的效率和性能，不允许数值相同 --> 21 <!-- <li v-for="item of list" :key="index">{{item}}</li> --> 22 23 <!-- 表示循环list数据列表，每一项的内容放到item里，每一项的下标放到index里 --> 24 <!-- 此处key值用index，能确保数据唯一，但也不是最好的选择！ --> 25 <li v-for="(item , index) of list" :key="index">{{item}}</li> 26 </ul> 27 </div> 28 <!-- --------------------------------------Mr丶L----------------------------------------------- --> 29 <script> 30 new Vue({ 31 el:"#root", 32 data:{ 33 show:true, 34 list:[1,2,3,1] 35 }, 36 methods:{ 37 handleClick:function(){ 38 this.show= !this.show; 39 } 40 } 41 }) 42 </script> 43 44 </body> 45 </html> 46