vuejs綁定class和style樣式
更新時間：2017年04月11日 09:45:23 作者：webCoder
本文主要介紹了vue.js實現(xiàn)綁定class和style樣式的方法。具有很好的參考價值。下面跟著小編一起來看下吧
綁定Html Class
我們可以傳給 v-bind:class 一個對象，以動態(tài)地切換 class。注意 v-bind:class 指令可以與普通的 class 特性共存：
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
data: { isA: true, isB: false}
渲染結(jié)果：
<div class="static class-a"></div>
你也可以直接綁定數(shù)據(jù)里的一個對象,結(jié)果與上面的一致：
<div v-bind:class="classObject"></div>
data: {
classObject: {
'class-a': true,
'class-b': false
}
}
綁定內(nèi)聯(lián)樣式
v-bind:style的對象語法十分直觀——看著非常像 CSS，其實它是一個 JavaScript 對象。CSS 屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）：
<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'
}
}
備注：當 v-bind:style使用需要廠商前綴的 CSS 屬性時如 transform，Vue.js 會自動偵測并添加相應的前綴。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue學習筆記進階篇之單元素過度，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
vue中的事件觸發(fā)(emit)及監(jiān)聽(on)問題
這篇文章主要介紹了vue中的事件觸發(fā)(emit)及監(jiān)聽(on)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue項目實現(xiàn)換膚功能的一種方案分析，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
Vue3-新特性defineOptions和defineModel示例詳解
在Vue3.3中新引入了defineOptions宏主要是用來定義Option API的選項,可以用defineOptions定義任意的選項,props、emits、expose、slots除外,本文給大家介紹Vue3-新特性defineOptions和defineModel,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了在vue中實現(xiàn)echarts隨窗體變化，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
@change 是 Vue.js 中用于監(jiān)聽表單元素值變化的事件處理器,很多組件有@change事件,那到底如何獲取到當前的參數(shù)呢？本文給大家詳細講解,感興趣的朋友一起看看吧2023-11-11
多頁vue應用的單頁面打包方法(內(nèi)含打包模式的應用)
這篇文章主要介紹了多頁vue應用的單頁面打包方法(內(nèi)含打包模式的應用)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
在Web開發(fā)中,獲取DOM元素的寬度、高度以及滾動位移是常見的需求,這篇文章主要給大家介紹了關于vue獲取組件中元素寬度常用的方法,需要的朋友可以參考下2024-08-08
本篇文章主要介紹了vue2.0父子組件間通信的實現(xiàn)方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-04-04
這篇文章主要為大家詳細介紹了vue自定義全局組件實現(xiàn)彈框案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03