1. 程式人生 > 實用技巧 >vue常用指令及原理

vue常用指令及原理

1 v-if 判斷表示式是否為真,如果為真則插入DOM。v-show 則是通過控制css樣式來控制是否顯示。

如果要顯示的元素中含有圖片,使用 v-show 可以在顯示之前提前載入,當值為 true 時就顯示。使用 v-if 時圖片會直到顯示時才開始載入。

2 v-for 指令可以用來遍歷一個數組或物件

對於陣列例子:v-for="(it,index)incars":key="it" 。其中順序是(value, key)

3 vue 的響應式限制

3.1 為物件新增新屬性。因 getter/setter 方法是vue物件初始化的時候新增,因此已存在的屬性是響應式,因此直接為物件新增新屬性時不會使該屬性成為響應式。

3.2 設定陣列元素。不能直接使用索引來設定陣列元素,使用.splice()方法移除舊元素並新增新元素。例如

this.cars.splice(1, 1, '黃河')

3.3 設定陣列長度。js 中可以設定陣列長度,自動讓空元素填充陣列至該長度。vue中不可以設定data中的陣列,因為 vue 不能檢測到該操作對陣列的任何更改。