Vue基礎學習（三） 常見指令

2021-08-31 06:55:01 字數 1768 閱讀 6154

其基本用途是動態更新 html 上的屬性，如：id，class等。

data:

})2.1物件語法

給 v-blind:class 設定乙個物件，可以動態地切換 class，例如：

data:

})上面示例中，類名 active依賴於資料 isactive，當其為 ture 時，div 會擁有類名 isactive,為 false 時則沒有，所以上例最終渲染完的結果是：
物件中也可以傳入多個屬性，來動態切換 class。另外，:class也可以與普通 class 共存。

2.2繫結的資料物件不必內聯定義在模板裡：

data: 


}
渲染的結果和上面一樣。我們也可以在這裡繫結乙個返回物件的計算屬性。這是乙個常用且強大的模式：

data: ,


computed: 


}}
我們可以把乙個陣列傳給 v-bind:class，以應用乙個 class 列表：

data:
渲染為：
如果你也想根據條件切換列表中的 class，可以用三元表示式：
這樣寫將始終新增 errorclass，但是只有在 isactive 是 truthy[1] 時才新增 activeclass。

不過，當有多個條件 class 時這樣寫有些繁瑣。所以在陣列語法中也可以使用物件語法：
當在乙個自定義元件上使用 class 或 :class屬性時，這些類將被新增到該元件的根元素上面。這個元素上已經存在的類不會被覆蓋。

例如，如果你宣告了這個元件：

vue.component('my-component', )
然後在使用它的時候新增一些 class：

html 將被渲染為:

hi
對於帶資料繫結 class 也同樣適用：

當 isactive 為 truthy[1] 時，html 將被渲染成為：

hi
v-bind:style 可以給元素繫結內聯樣式，方法與 :class 類似。

5.1物件語法

v-bind:style css 屬性名可以用駝峰式 (camelcase) 或短橫線分隔 (kebab-case，記得用單引號括起來) 來命名：

data:
直接繫結到乙個樣式物件通常更好，這會讓模板更清晰：

data: 


}
同樣的，物件語法常常結合返回物件的計算屬性使用。

5.2陣列語法

v-bind:style 的陣列語法可以將多個樣式物件應用到同乙個元素上：
5.3自動新增字首

當 v-bind:style 使用需要新增瀏覽器引擎字首的 css 屬性時，如 transform，vue.js 會自動偵測並新增相應的字首。

Vue 基礎指令學習

學習vue的一些總結，第一次寫部落格，文筆實在是很差 不過我會不斷寫的。v text 是元素的innertext 只能在雙標籤中使用 v html 是元素的innerhtml，不能包含 v if 元素是否移除或者插入 v show 元素隱藏或者顯示 v model 雙向資料繫結 v text v i...

Vue 基礎指令學習

學習vue的一些總結，第一次寫部落格，文筆實在是很差 不過我會不斷寫的。v text 是元素的innertext 只能在雙標籤中使用 v html 是元素的innerhtml，不能包含 v if 元素是否移除或者插入 v show 元素隱藏或者顯示 v model 雙向資料繫結 v text v i...

Vue常見指令

v text 更新元素的 textcontent v html 更新元素的 innerhtml v if 如果為 true,當前標籤才會輸出到頁面 v else 如果為 false,當前標籤才會輸出到頁面 v show 通過控制 display 樣式來控制顯示 隱藏 v for 遍歷陣列 物件 v ...