Vue學習筆記八：v-for，v-if，v-show指令
阿新 • • 發佈：2019-04-30
toc 創建刪除 logs clas ref -i 較高的 src tps
目錄
- v-for指令：遍歷
- HTML和效果圖
- v-for講解
- v-if和v-show：創建，刪除，顯示，隱藏
- HTML和效果圖
- v-if和v-show的原理
v-for指令：遍歷
HTML和效果圖
有幾個需要講的點，先看v-for的HTML，如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>蜀雲泉</title> <script type="text/javascript" src="../lib/vue-2.6.10.js"></script> </head> <body> <!-- 這個div就是MVVM中的V，View --> <div id="app"> <!-- 直接遍歷數字 --> <p v-for="item in 3">這是第{{ item }}次循環</p> <!-- 遍歷list數組 --> <p v-for="item in list" v-text="item"></p> <!-- 遍歷list對象 --> <p v-for="item in list2">{{ item.id }}--{{ item.name }}</p> <!-- 遍歷list3對象 --> <p v-for="(val,key,i) in list3">值是：{{ val }}--鍵是：{{ key }}--索引是：{{ i }}</p> <hr> <!-- 再使用v-for遍歷對象添加對象的時候，一定要寫key，這個可以防止數據錯亂 --> <div> <label>id: <input type="text" v-model="id"> </label> <label>name: <input type="text" v-model="name"> </label> <input type="button" value="添加" @click="add"> </div> <p v-for="item in list2" :key="item.id"> <input type="checkbox">{{ item.id }}--{{ item.name }} </p> </div> <script> // 這個vm就是MVVM中的VM，ViewModel var vm=new Vue({ el: '#app', // 這個data就是MVVM中的M，Model data: { id:'', name:'', list:[1,2,3], list2:[ {id:1,name:"許嵩"}, {id:2,name:"蜀雲泉"}, {id:3,name:"彈吉他"} ], list3:{ id:1, name:"蜀雲泉", gender:"男", age:24 } }, methods: { add(){ this.list2.push({id:this.id,name:this.name}) } } }) </script> </body> </html>
效果圖如下：
v-for講解
其實看代碼就已經清楚了，我不清楚的一點是，我想寫多個插值表達式，就必須使用插值表達式，這樣不就出現了才學Vue的時候出現的插值表達式閃爍的問題了？我使用v-text也僅僅只能使用一個插值表達式，這裏暫時存疑。
重點的地方就是v-for在遍歷的同時，如果向數組裏面插入新的內容的時候，一定要寫key值，如果不寫的話，復選框並沒有真正的綁定數據，僅僅綁定的是那個索引的數據而已，所以一定要寫key
v-if和v-show：創建，刪除，顯示，隱藏
HTML和效果圖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>蜀雲泉</title> <script type="text/javascript" src="../lib/vue-2.6.10.js"></script> </head> <body> <!-- 這個div就是MVVM中的V，View --> <div id="app"> <input type="button" value="點我" @click="flag=!flag"> <h3 v-if="flag">這是v-if控制的元素</h3> <h3 v-show="flag">這是v-show控制的元素</h3> </div> <script> // 這個vm就是MVVM中的VM，ViewModel var vm=new Vue({ el: '#app', // 這個data就是MVVM中的M，Model data: { flag:true }, methods: { } }) </script> </body> </html>
效果圖：點擊按鈕，下面的會消失，再點擊會出現
v-if和v-show的原理
這個我們打開調試臺就知道了，如圖
發現沒，總結一下
- v-if每次都會重新刪除和創建元素
- v-show是切換了元素的display的顯示狀態而已
- v-if有較高的切換性能消耗，所以涉及到頻繁的切換，不要使用v-if
- v-show有較高的初始渲染消耗
防盜鏈接：本博客由蜀雲泉發表
Vue學習筆記八：v-for，v-if，v-show指令