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

  

對象

  對象可以用keyvalue來獲取每一個對象的屬性名以及屬性值

  注意這里第一個參數固定接收value第二個參數固定接收key第三個參數固定接收index(即這個鍵值對是對象中的第幾個)

  

注意點

  不可以通過修改數組下標的形式給數組添加項來改變頁面渲染(雖然數組改變,但是頁面不會變化

  可以操作數組數據並且頁面也會相應的方法如下:

  pushpopshiftunshiftsplicesortreverse

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

 

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

  如果需要添加,則需要改變對象的引用

set方法

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

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

  

  set方法也是Vue實例的方法,可以用vm.$set來調用

  

  此外,對於數組,也可以用set方法,其中傳入的參數同對象的情況類似

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM