v-bind用于class和style時,Vue做了增強,表達式結果除了字符串之外,還可以是對象或數組。
### 綁定HTMLClass
#### 對象語法
```
<div v-bind:class="{ active: isActive }"></div>
```
isActive是實例中的數據。也可以與普通的class屬性共存。
```
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
```
綁定的數據對象不必內聯定義在模板里,可以如下定義:
```
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
```
還可以綁定一個返回對象的計算屬性:
```
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
```
#### 數組語法
```
<div v-bind:class="[activeClass, errorClass]"></div>
```
```
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
```
渲染結果:
```
<div class="active text-danger"></div>
```
三元表達式:
```
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
```
這樣寫將始終添加`errorClass`,但是只有在`isActive`是 truthy[\[1\]](https://cn.vuejs.org/v2/guide/class-and-style.html#footnote-1)時才添加`activeClass`。
不過,當有多個條件 class 時這樣寫有些繁瑣。所以在數組語法中也可以使用對象語法:
```
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
```
#### 用在組件上
```
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
```
在一個自定義組件上使用class屬性時,這些class將會被添加到該組件的根元素上面。這個元素上已經存在的class不會被覆蓋。
以上實例在使用的時候添加另外的class
```
<my-component class="baz boo"></my-component>
```
則最終的渲染效果為:
```
<p class="foo bar baz boo">Hi</p>
```
對于帶綁定class也同樣適用:
```
<my-component v-bind:class="{ active: isActive }"></my-component>
```
當 isActive 為 truthy[1] 時,HTML 將被渲染成為:
```
<p class="foo bar active">Hi</p>
```
### 綁定內聯樣式
v-bind:style 直觀看像CSS, 其實是一個JavaScript對象,CSS屬性名可以用駝峰式或短線分隔命名:
```
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
```
也可以綁定一個樣式對象:
```
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
```
#### 數組語法
可以綁定多個樣式對象到同一個元素。
```
<div v-bind:style="[baseStyles, overridingStyles]"></div>
```
#### 自動添加前綴
當`v-bind:style`使用需要添加[瀏覽器引擎前綴](https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix)的 CSS 屬性時,如`transform`,Vue.js 會自動偵測并添加相應的前綴。
#### 多重值
從 2.3.0 起你可以為`style`綁定中的屬性提供一個包含多個值的數組,常用于提供多個帶前綴的值,例如:
```
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
```
- 引入篇
- 基礎篇
- 快速入手
- 名詞解釋
- Vue語法
- Vue安裝
- Vue實例
- 模板語法
- 計算屬性和偵聽器
- Class與Style綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 進階篇
- 常用模塊
- 單文件組件
- 快速學會Vue Router路由
- Vue Route 進階使用
- Vuex 與狀態管理
- Axios
- Mock.js
- data數據顯示在頁面
- Vue生命周期
- Vue按需加載組件
- 國際化
- 頁面加載進度條 -NProgress
- 自定義主題顏色
- 開發篇
- Vue入門——創建并運行一個Vue項目
- Vue + Element UI 項目創建
- 使用Vue ui項目創建工具在網頁中創建Vue項目
- Vue項目創建入門實例
- Vue CLI
- 創建項目
- 使用Visual Studio Code 開發Vue項目
- 高級篇
- 組件深入
- Vue+Element
- Vue + ElementUI 主題顏色切換
- 工具篇
- 在線代碼編輯器
- 開發工具(IDE,集成開發環境)
- npm(JavaScript包管理工具)介紹
- Node.js(npm)在Windows下安裝
- webpack介紹
- webpack快速實例
- webpack
- 快速入門實例
- 安裝
- 概念
- Nodejs
- 基礎
- npm
- 命令參考
- 命令
- 模塊安裝
- Babel
- 問題解決篇
- ERROR Failed to get response from https://registry.yarnpkg.com/vue-cli-version -marker
- Vue常見問題
- You are using the runtime-only build of Vue where the template compiler is not
- yarn 報unable to get local issuer certificate
- yarn There appears to be trouble with your network connection. Retrying
- Expected Boolean, got String with value "true".
- 項目篇
- 項目創建
- 項目設計
- 頁面
- 開發問題
- 后端
- Spring Boot + Activiti 工作流框架搭建之一
- Spring Boot + Activiti 工作流框架搭建之二
- 工作流
- Java流程框架
- Activiti
- 頁面風格
- green
- blue
- orange
- 參考篇
- 好的Git項目
- Vue的在線js
- 指令
- 開發說明
- JavaScript 高級
- export和import
- JS模塊化規范對比以及在Node.js的實現
- Storage
- ES2015
- scss
- CSS、Sass、SCSS