vue.js綁定class和style樣式（6）
更新時間：2016年12月09日 09:00:25 作者：wenjuanzhao
這篇文章我們將一起學(xué)習(xí)vue.js實現(xiàn)綁定class和style樣式，感興趣的小伙伴們可以參考一下
數(shù)據(jù)綁定一個常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。因為它們都是 attribute，我們可以用 v-bind 處理它們：只需要計算出表達(dá)式最終的字符串。不過，字符串拼接麻煩又易錯。因此，在 v-bind 用于 class 和 style 時，Vue.js 專門增強(qiáng)了它。表達(dá)式的結(jié)果類型除了字符串之外，還可以是對象或數(shù)組。
通過 v-bind:class 或者 :class 來為style或者class來綁定
綁定class
<div class="test">
<div :class="{active:isActive,cc:isCc}"></div>
</div>
js代碼
var myVue = new Vue({
el: ".test",
data: {
isActive:true,
isCc:false
},
});
或者下面的代碼也可以實現(xiàn)
<div class="test">
<div :class=classObject></div>
</div>
js代碼
var myVue = new Vue({
el: ".test",
data: {
classObject:{
active:true
}
},
});
通過過數(shù)組將class綁定
<div class="test">
<div :class="[activeClass,error]">dsdsd</div>
</div>
js代碼
var myVue = new Vue({
el: ".test",
data: {
activeClass:"active",
error:"ddd"
},
});
綁定style屬性
<div class="test">
<div :style=styleObject>dsdsd</div>
</div>
js代碼
var myVue = new Vue({
el: ".test",
data: {
styleObject:{
color: "red",
fontSize: "30px"
}
},
});
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)登錄、注冊、退出、跳轉(zhuǎn)等功能
這篇文章主要介紹了vue實現(xiàn)登錄、注冊、退出、跳轉(zhuǎn)等功能,需要的朋友可以參考下2020-12-12
這篇文章主要介紹了vue路由攔截及頁面跳轉(zhuǎn)的設(shè)置方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
Vite是一款非常輕量級的Web開發(fā)框架，它可以幫助開發(fā)者快速搭建一個開發(fā)環(huán)境。Vite搭建的開發(fā)環(huán)境可以提供更快的編譯速度，更少的配置，更好的性能和更多的開發(fā)者友好性，使開發(fā)者可以更快地構(gòu)建出功能強(qiáng)大的Web應(yīng)用程序。2023-02-02
這篇文章主要介紹了Vue——前端生成二維碼的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
Pinia是Vue的存儲庫,它允許您跨組件/頁面共享狀態(tài),下面這篇文章主要給大家介紹了Pinia中action使用方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue-router傳遞參數(shù)分為兩大類，一類是編程式的導(dǎo)航 router.push另一類是聲明式的導(dǎo)航 <router-link>，本文通過實例代碼給大家介紹vue-router傳遞參數(shù)的幾種方式，感興趣的朋友跟隨小編一起看看吧2018-11-11
vue template當(dāng)中style背景設(shè)置不編譯問題
這篇文章主要介紹了vue template當(dāng)中style背景設(shè)置不編譯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue項目配置element-ui容易遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue-router(this.$router)如何在新窗口打開路由跳轉(zhuǎn)頁面
這篇文章主要介紹了vue-router(this.$router)如何在新窗口打開路由跳轉(zhuǎn)頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
ElementUI如何修改Dialog的標(biāo)題樣式
這篇文章主要介紹了ElementUI如何修改Dialog的標(biāo)題樣式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10