vue常用指令及原理

2022-06-30 21:15:12 字數 596 閱讀 8656

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

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

2 v-for 指令可以用來遍歷乙個陣列或物件

對於陣列例子:v-for="

(it, index

) in

cars":

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 不能檢測到該操作對陣列的任何更改。

Vue常用指令及使用

指令是以資料去驅動dom行為,簡化dom操作。常用指令如下 v text innertext,不能解析文字中的html標籤 v html innerhtml,可解析文字中的html標籤 v show控制元素的顯示 隱藏 v if v else if v else滿足條件才顯示對應的元素 v for遍...

Vue常用指令及介紹

vue 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是,vue 被設計為可以自底向上逐層應用。vue 的核心庫只關注檢視層,不僅易於上手,還便於與第三方庫或既有專案整合。new vue v show 根據表示式的真假值來顯示和隱藏元素 vs temp 如懿傳 p ok 還珠格格 p d...

Vue常用的指令及用法

v if 判斷是否隱藏 list.lenght 0 v if div else v else div v for 資料迴圈 item代表是迴圈的值 index代表是每一項 也可以說是下標 key 代表標識 for item,index in list key index p div v bind c...