Vue 的 Class 與 Style 綁定

Eidesen 發布于2019-08-20 19:06 / 1418人閱讀

摘要：當我們在控制臺修改的屬性為時，會給添加一個藍色的背景顏色。我們也可以傳入更多的屬性來切換多個。和上一篇的模板語法和計算屬性下一篇的條件渲染和列表渲染

Class 與 Style 綁定

上一篇：Vue 的模板語法和計算屬性：https://segmentfault.com/a/11...
下一篇：Vue 的條件渲染和列表渲染：https://segmentfault.com/a/11...

綁定 HTML Class 對象語法

我們可以傳給 v-bind:class 一個對象，以動態地切換 class：

如上，我們先給 .exp 一個邊框，我們利用 v-bind 方法傳入一個新的 class 屬性 .newExp，設置一個藍色的背景顏色。當我們在控制臺修改 .newExp 的屬性為 true 時，會給 div 添加一個藍色的背景顏色。

我們也可以傳入更多的屬性來切換多個 class 。

在模板里的渲染結果為：

我們也可以使用對象的方法來切換屬性

渲染結果和上面的一樣

數組語法

我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表：

渲染為：

要切換class，使用三元運算符：

使用對象語法的話，會看起來更加清晰

數組語法

v-bind:style 的數組語法可以將多個樣式對象應用到一個元素上：

自動添加前綴

當 v-bind:style 使用需要特定前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測并添加相應的前綴。

Chrome 和 Safari : -webkit-
IE :               -ms-
Firfox :           -moz-
Opera :            -o-

To be continue......

上一篇：Vue的模板語法和計算屬性：https://segmentfault.com/a/11...
下一篇：Vue 的條件渲染和列表渲染：https://segmentfault.com/a/11...

GPU云服務器云服務器綁定Style樣式綁定class vue綁定空間與域名的綁定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85152.html

Vue.js-計算屬性和class與style綁定

摘要：每一個計算屬性都包含一個和一個。使用計算屬性的原因在于它的依賴緩存。及與綁定的主要用法是動態更新元素上的屬性。測試文字當的表達式過長或邏輯復雜時，還可以綁定一個計算屬性。學習筆記：前端開發文檔計算屬性所有的計算屬性都以函數的形式寫在Vue實例中的computed選項內，最終返回計算后的結果。計算屬性的用法在一個計算屬性中可以完成各種復雜的邏輯，包括運算、函數調用等，只要最終...

Shihira 2019-08-23 16:02 評論0 收藏0
004-讀書筆記-Vue官網 Class與Style的綁定

摘要：綁定綁定，使用，簡寫的形式是。綁定比較靈活，可以使用表達式字符串對象或數組。綁定字符串綁定字符串的時候只能綁定一個，不能綁定多個。 1.綁定Class 綁定Class，使用 v-bind:class，簡寫的形式是 :class。綁定Class比較靈活，可以使用表達式、字符串、對象或數組。 1-1 搭建結構首先，新建一些 class 樣式： .colorRed { colo...

hufeng 2019-08-21 17:16 評論0 收藏0
Vue中 Class 與 Style 綁定

摘要：與綁定數據綁定一個常見需求是操作元素的列表和它的內聯樣式。表達式的結果類型除了字符串之外，還可以是對象或數組。綁定對象語法我們可以傳給一個對象，以動態地切換上面的語法表示的更新將取決于數據屬性是否為真值。 Class 與 Style 綁定數據綁定一個常見需求是操作元素的 class 列表和它的內聯樣式。因為它們都是屬性。因此，在 v-bind 用于 class 和 style 時，...

lemanli 2019-08-20 19:05 評論0 收藏0
Vue.js如何綁定class和style（內聯樣式）

摘要：我們還可以綁定返回對象的計算屬性。用在組件上輸出這同樣適用于綁定輸出綁定內聯樣式對象語法的對象語法十分直觀看著非常像，其實它是一個對象。 vue的class和style綁定綁定html class 對象語法我們可以傳給 v-bind:class 一個對象，以動態地切換 class：上面的語法表示 class active 的更新將取決于數據屬性 isActive 是否為真值。...

Chaz 2019-08-20 19:05 評論0 收藏0
React-JSX實現Class與 Style 動態綁定

摘要：錯誤例子可以實現的語法如下使用邏輯運算符文件文件使用三元運算符文件使用函數綁定的數據對象也不必內聯定義在模板里可以定義一個函數，類似中的鉤子函數。作者：羽徵摘要：操作元素的 class 列表和內聯樣式是數據綁定的一個常見需求，頻繁操作dom元素會降低javascript性能，為了實現高性能js，動態綁定class和style是高素養程序員的必選。本文以React-JSX語法為基礎，...

phodal 2019-08-23 10:48 評論0 收藏0