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