Vue 一套构建用户界面的渐进式的框架（条件与循环篇~）
生活随笔
收集整理的這篇文章主要介紹了
Vue 一套构建用户界面的渐进式的框架（条件与循环篇~）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
條件語句
條件判斷
<!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 區(qū)別
1、倆者區(qū)別v-if : 當(dāng)條件為false時，包含v-if指令的元素，根本不會存在dom中v-show : 當(dāng)條件為false時，v-show只是給我們的元素添加了一個行內(nèi)樣式 display:none-------------------------------------------------------------- 2、開發(fā)時如何選擇？當(dāng)需要在顯示與隱藏之間切片很頻繁時，使用v-show當(dāng)只有一次切換時，通過使用v-if循環(huán)語句
遍歷數(shù)組
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>循環(huán)</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>循環(huán)</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>遍歷數(shù)組渲染原理（v-for :key）
官方推薦使用 v-for 時，給對應(yīng)的元素或組件添加上一個 :key 屬性。為什么需要這個key屬性這和Vue的'虛擬DOM'和'Diff算法'有關(guān)描述：有個數(shù)組 0:a，1:b, 2:c，已經(jīng)渲染到dom數(shù)頁面上 ,若再進(jìn)行插值操作，假如要插入e元素，要插到a和b的中間，那么此時Vue生成虛擬Dom樹，然后進(jìn)行和頁面dom對比，若循環(huán)中沒有 key這個屬性，那么首先e把e替換，然后把b替換到c，最后再進(jìn)行生成一個新節(jié)點(diǎn)索引為3元素為C，這樣效率并不高效。這樣引進(jìn)key會使更新虛擬dom更高效。因?yàn)橛辛薻ey這個屬性，這個要加入的新節(jié)點(diǎn)是直接插進(jìn)去，并創(chuàng)建出來，不會影響其他元素節(jié)點(diǎn)。（index不嚴(yán)謹(jǐn)）'注意：要保持kye的唯一性'響應(yīng)式方法
1、push() 在數(shù)組的最后新增一個或多個元素2、pop() 刪除數(shù)組中的最后一個或多個元素3、shift() 刪除數(shù)組中第一個或多個元素4、unshift() 在數(shù)組最前面添加一個或多個元素5、splice() 刪除/插入/替換 元素6、sort() 排序元素7、reverse() 反轉(zhuǎn)元素8、Vue.set(obj,index,value)'注意：通過索引值修改數(shù)組的元素不是響應(yīng)式的'總結(jié)
以上是生活随笔為你收集整理的Vue 一套构建用户界面的渐进式的框架（条件与循环篇~）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【技术】jquery暂无图片替换
- 下一篇： 深度 ghost xp3 装IIS 方法