條件渲染
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方法,其中傳入的參數同對象的情況類似

