<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs中Class與Style 綁定</title>
<link rel="stylesheet" href="css/vuetext.css">
</head>
<body>
<!-- 數(shù)據(jù)綁定常見(jiàn)的需求是綁定class和內(nèi)聯(lián)樣式
v-bind 可以綁定屬性class -->
<!-- 這個(gè)表示如果isactive是true時(shí) class就與active綁定 -->
<div id="app-1" v-bind:class="{ active: isActive }">
猴猴呀
</div>
<!-- 還可以綁定靜態(tài)樣式--> 
<div id="app-2" class="static" v-bind:class="{ active: isActive }">
lowrie
</div>
<!-- 還可以直接綁定數(shù)據(jù)里的一個(gè)對(duì)象--> 
<div id="app-3" v-bind:class="classObject">
猴猴呀
</div>
<div id="app-4" v-bind:class="[activeClass, errorClass]">
lowrie
</div>
<!-- 關(guān)于vue組件會(huì)專(zhuān)門(mén)再學(xué)習(xí) -->
<!-- v-bind綁定內(nèi)聯(lián)樣式與綁定class類(lèi)似 數(shù)組 對(duì)象 -->

 

<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>

js:

var app = new Vue({
el: '#app-1',
data: {
message: 'Hello Vue!',
isActive: true,
}
});
var app2 = new Vue({
el: '#app-2',
data: {
message: 'Hello Vue!',
isActive: true,
}
});
var app3=new Vue({
el:'#app-3',
data: {
classObject: {
active: true,

}
}
});
var app4=new Vue({
el:'#app-4',
data:{
activeClass: 'active',
errorClass: 'text-danger'
}
});

css:

.active{
color: #FFA07A;
};

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中實(shí)現(xiàn)可編輯table及其中加入下拉選項(xiàng)
這篇文章主要介紹了vue中實(shí)現(xiàn)可編輯table及其中加入下拉選項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue實(shí)現(xiàn)滾動(dòng)鼠標(biāo)滾輪切換頁(yè)面
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滾動(dòng)鼠標(biāo)滾輪切換頁(yè)面，類(lèi)似于縱向走馬燈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
Vuex的使用及知識(shí)點(diǎn)筆記
這篇文章主要介紹了Vuex的使用及知識(shí)點(diǎn)筆記，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
Vue.js實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器應(yīng)用
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
vue遍歷中存在el-form之踩坑記錄
這篇文章主要介紹了vue遍歷中存在el-form之踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
監(jiān)聽(tīng)element-ui table滾動(dòng)事件的方法
這篇文章主要介紹了監(jiān)聽(tīng)element-ui table滾動(dòng)事件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
關(guān)于vant折疊面板默認(rèn)展開(kāi)問(wèn)題
這篇文章主要介紹了關(guān)于vant折疊面板默認(rèn)展開(kāi)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
解決VUEX兼容IE上的報(bào)錯(cuò)問(wèn)題
下面小編就為大家分享一篇解決VUEX兼容IE上的報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue利用vue meta info設(shè)置每個(gè)頁(yè)面的title與meta信息
這篇文章主要給大家介紹了關(guān)于vue如何利用vue meta info設(shè)置每個(gè)頁(yè)面的title與meta信息的相關(guān)資料,文中將實(shí)現(xiàn)的方法介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2021-10-10
vue3+vite中使用import.meta.glob的操作代碼
在vue2的時(shí)候，我們一般引入多個(gè)js或者其他文件，一般使用? require.context 來(lái)引入多個(gè)不同的文件，但是vite中是不支持 require的，他推出了一個(gè)功能用import.meta.glob來(lái)引入多個(gè)，單個(gè)的文件，下面通過(guò)本文介紹vue3+vite中使用import.meta.glob,需要的朋友可以參考下
2022-11-11