Vue2.5入門——v-if，v-show與v-for指令
阿新 • • 發佈：2019-02-12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="root"> <!--判斷命令v-if(控制dom的存在與否)--> <!--當show對應的資料項是false的時候，直接把標籤移除--> <div v-if="show">hello world</div> <!--v-show 控制dom的顯示與否--> <!--但show的資料項是false的時候，不會移除，只是在當前標籤新增一個display:none的屬性--> <div v-show="show">hello world</div> <!--多次使用建議使用v-show，保證效能。只使用一兩次則用v-if--> <!--繫結click事件--> <button @click="handleClick">toggle</button> <!--v-for 控制一組資料，通過這組資料迴圈顯示頁面項的dom結構--> <!--v-for(迴圈內容的展示)，當你有一個數據需要迴圈展示的時候，它會把你的資料做迴圈，迴圈展示list標籤--> <ul> <!--迴圈list的資料項--> <!--迴圈list的時候，把item輸出出來--> <!--:key,提升每一項的效能，每一項key的值不能相同--> <li v-for="item of list" :key="item">{{item}}</li> <!--另一種寫法,缺點是需要排序的時候index會出現問題--> <li v-for="(item,index) of list" :key="index">{{item}}</li> </ul> </div> <script> new Vue({ el:"#root", data:{ // show的值是真則顯示，假則隱藏 show:true, // 列表陣列 list:[1,2,3] }, // 方法 methods:{ // 每次點選都讓show值取反 handleClick:function () { this.show=!this.show } } }) </script> </body> </html>