Vue學習(五)——v-if,v-show,v-for指令
阿新 • • 發佈:2018-11-26
<!DOCTYPE html> <html> <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 如果給定值為true則顯示,否則會刪除dom元素--> <!-- v-show 如果給定值為true則顯示,否則新增display: none;的樣式 頻率更大的時候,選擇更好--> <!-- v-for 迴圈 新增key屬性,提高效能,值也可以為item,key值不可以相同--> <div v-show="show">hello world</div> <button @click="handleClick">toggle</button> <ul> <li v-for="(item,index) in list" :key="index">{{item}}</li> </ul> </div> <script> new Vue({ el:"#root", data:{ show:true, list:[1,2,3] }, methods:{ handleClick:function(){ this.show=!this.show; } } }) </script> </body> </html>
注:學習筆記內容來自:https://www.imooc.com/learn/980
官網:cn.vuejs.org