Vue——條件渲染&列表渲染

條件渲染

v-if

　　在三者的後面跟上一個變量，只有當變量值爲true時（能夠對變量值隱式轉換），綁定該條件的元素才顯示

　　

v-else-if和v-else

　　能夠對多個元素綁定一個變量，當變量的值符合其中之一時，符合條件的元素顯示，不然綁定v-else的元素顯示

　　

　　注意多個v-if、v-else-if和v-else之間須要緊挨着，不然瀏覽器會報錯

　　

　　

v-show

　　實際上同v-if效果等同，當綁定事件的元素符合引號中的條件時，該元素才顯示

　　

　　該方法和v-if區別在於，v-show實際是經過修改DOM元素的display屬性來實現節點的顯示和隱藏的，而v-if則是經過添加/刪除DOM節點來實現的

　　

　　

　　所以，若是須要頻繁修改元素的顯示/隱藏，則用v-show

key

　　在使用v-if進行頁面的條件渲染時，有一個問題就是，Vue會在從新渲染時儘量複用以前渲染過的元素，所以可能形成下面這樣的問題

　　

　　頁面中輸入信息後點擊按鈕，input裏的內容沒有清空

　　

　　

　　爲了解決這個問題，須要對元素添加key，以告訴Vue這個元素是文檔中惟一的

　　

 

列表渲染

　　列表渲染用v-for語句，能夠用在同一標籤循環建立而內容不一樣的時候

　　通常書寫方式有如下三種：

數組

　　用in語句遍歷（建議用ES6裏的of語句），其中遍歷到的是數組的項

　　

　　一樣是數組，也能夠用(item,index) in這種語法格式，其中item爲數組項，而index爲數組項下標

　　

　　這裏每個循環項最好都帶一個key值，後續跟的是一個惟一的值（通常會用後端返回的數據中的id）

　　

對象

　　對象能夠用key和value來獲取每個對象的屬性名以及屬性值

　　注意這裏第一個參數固定接收value，第二個參數固定接收key，第三個參數固定接收index（即這個鍵值對是對象中的第幾個）

　　

注意點

　　不能夠經過修改數組下標的形式給數組添加項來改變頁面渲染（雖然數組改變，可是頁面不會變化）

　　能夠操做數組數據而且頁面也會相應的方法以下：

　　push、pop、shift、unshift、splice、sort、reverse

　　或者改變數據的指向（即改變這個引用類型的引用）

 

　　一樣地，對於對象的列表渲染，能夠改變已有項的鍵值使得頁面也響應並渲染，但不可添加新的鍵值對

　　若是須要添加，則須要改變對象的引用

set方法

　　上面提到了對象的列表渲染時添加鍵值對的問題，Vue中提供了set方法能夠解決這個問題

　　set方法接收三個參數，第一個爲須要修改的對象名，第二和第三個則爲須要添加並渲染的鍵名和值名

　　

　　set方法也是Vue實例的方法，能夠用vm.$set來調用

　　

　　此外，對於數組，也能夠用set方法，其中傳入的參數同對象的狀況相似