Vue 一套构建用户界面的渐进式的框架（条件与循环篇~）
生活随笔
收集整理的這篇文章主要介紹了
Vue 一套构建用户界面的渐进式的框架（条件与循环篇~）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
條件語句
條件判斷
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>條件語句</title> </head> <body><div class="app"><div v-if="isStatus"><h2>你好</h2><h2>啊</h2><h2>世界</h2></div><div v-else="isStatus"><h2>我很好</h2><h2>謝謝</h2><h2>嘞</h2></div><button @click='change()' style="cursor: pointer;">切換</button></div><script src="./vue.js"></script><script>const app = new Vue({el : '.app' ,data : {isStatus : true},methods : {change(){this.isStatus = !this.isStatus}}})</script> </body> </html>v-show 與 v-if 區別
1、倆者區別v-if : 當條件為false時，包含v-if指令的元素，根本不會存在dom中v-show : 當條件為false時，v-show只是給我們的元素添加了一個行內樣式 display:none-------------------------------------------------------------- 2、開發時如何選擇？當需要在顯示與隱藏之間切片很頻繁時，使用v-show當只有一次切換時，通過使用v-if循環語句
遍歷數組
v-for='(iteam,index) in list'例如：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>循環</title> </head> <body><div class="app"><ul ><li v-for='(iteam,index) in arry'>{{index+1}}、{{iteam}}</li></ul></div><script src="./vue.js"></script><script>const app = new Vue({el : '.app' ,data : {arry : ['Curry','Kobe','James','Jine'],}})</script> </body> </html>遍歷對象
v-for='(value,key,index)'例如：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>循環</title> </head> <body><div class="app"><li v-for='(value,key,index) in obj'>{{index+1}}、{{key}}:{{value}}</li></ul></div><script src="./vue.js"></script><script>const app = new Vue({el : '.app' ,data : {obj : {name : 'jine',age : 22 ,love : 'basketball',worker : 'code'}}})</script> </body> </html>遍歷數組渲染原理（v-for :key）
官方推薦使用 v-for 時，給對應的元素或組件添加上一個 :key 屬性。為什么需要這個key屬性這和Vue的'虛擬DOM'和'Diff算法'有關描述：有個數組 0:a，1:b, 2:c，已經渲染到dom數頁面上 ,若再進行插值操作，假如要插入e元素，要插到a和b的中間，那么此時Vue生成虛擬Dom樹，然后進行和頁面dom對比，若循環中沒有 key這個屬性，那么首先e把e替換，然后把b替換到c，最后再進行生成一個新節點索引為3元素為C，這樣效率并不高效。這樣引進key會使更新虛擬dom更高效。因為有了key這個屬性，這個要加入的新節點是直接插進去，并創建出來，不會影響其他元素節點。（index不嚴謹）'注意：要保持kye的唯一性'響應式方法
1、push() 在數組的最后新增一個或多個元素2、pop() 刪除數組中的最后一個或多個元素3、shift() 刪除數組中第一個或多個元素4、unshift() 在數組最前面添加一個或多個元素5、splice() 刪除/插入/替換 元素6、sort() 排序元素7、reverse() 反轉元素8、Vue.set(obj,index,value)'注意：通過索引值修改數組的元素不是響應式的'總結
以上是生活随笔為你收集整理的Vue 一套构建用户界面的渐进式的框架（条件与循环篇~）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【技术】jquery暂无图片替换
- 下一篇： 深度 ghost xp3 装IIS 方法