快捷導(dǎo)航

Vue 綁定style和class樣式的寫法

更新時(shí)間：2023年10月17日 09:41:46 作者：小吳吳吳呀

class 與 style 綁定就是專門用來實(shí)現(xiàn)動(dòng)態(tài)樣式效果的技術(shù),如果需要?jiǎng)討B(tài)綁定 class 或 style 樣式,可以使用 v-bind 綁定,本文給大家講解Vue 綁定style和class樣式,感興趣的朋友一起看看吧

綁定 class 樣式【字符串寫法】

適用于：類名不確定，需要?jiǎng)討B(tài)指定。

.box{
	width: 100px;
	height: 100px;
}
.aqua{
	background-color: aqua;
}
.red{
	background-color: red;
}

<div id="APP">
	<div class="box" :class="back" @click="toggleBack">點(diǎn)擊變成紅色</div>
</div>

注：第二個(gè) class 使用的是 v-bind 簡寫的方式， :class=" " 。

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			back:"aqua"
		}
	},
	methods:{
		toggleBack(){
			this.back = "red";
		}
	}
});

點(diǎn)擊前：

點(diǎn)擊后：

綁定 class 樣式【數(shù)組寫法】：

適用于：要綁定多個(gè)樣式，個(gè)數(shù)不確定，名字也不確定。

.box{
	width: 100px;
	height: 100px;
}
.aqua{
	background-color: aqua;
}
.border{
	border: 20px solid red;
}
.radius{
	border-radius: 25px;
}

<div id="APP">
	<div class="box" :class="classArr">多個(gè)class樣式</div>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			classArr:["aqua","border","radius"]
		}
	}
});

如果要綁定多個(gè)樣式，個(gè)數(shù)確定，但是名字不確定，也可以使用以下寫法：

<div id="APP">
	<div class="box" :class="[a,b,c]">多個(gè)class樣式</div>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			a: "aqua",
			b: "border",
			c: "radius"
		}
	}
});

注：效果與上邊的示例相同，a、b、c 都是變量，控制是否使用某個(gè) class 樣式。

到此這篇關(guān)于Vue 綁定style和class樣式的方式的文章就介紹到這了,更多相關(guān)Vue 綁定style和class內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue-router4動(dòng)態(tài)路由刷新404/白屏的解決
本文主要介紹了vue-router4動(dòng)態(tài)路由刷新404/白屏的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue實(shí)現(xiàn)登陸頁面開發(fā)實(shí)踐
本文主要介紹了vue實(shí)現(xiàn)登陸頁面開發(fā)實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
vue與django集成打包的實(shí)現(xiàn)方法
這篇文章主要介紹了vue與django集成打包的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
vue中使用路由改瀏覽器標(biāo)題和圖標(biāo)
這篇文章主要介紹了vue中使用路由改瀏覽器標(biāo)題和圖標(biāo)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼
本篇文章主要介紹了Vuejs 組件——props數(shù)據(jù)傳遞的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-03-03
vue中?render?函數(shù)功能與原理分析
這篇文章主要介紹了vue中?render?函數(shù)功能與原理,結(jié)合實(shí)例形式分析了vue中render函數(shù)的基本功能、原理及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2023-06-06
vue-cli3項(xiàng)目展示本地Markdown文件的方法
這篇文章主要介紹了vue-cli3項(xiàng)目展示本地Markdown文件的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成
在本篇文章中小編給大家分享了關(guān)于如何使用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成的相關(guān)知識(shí)點(diǎn)內(nèi)容，需要的朋友們學(xué)習(xí)下。
2019-06-06
Antd下拉選擇,自動(dòng)匹配功能的實(shí)現(xiàn)
這篇文章主要介紹了Antd下拉選擇,自動(dòng)匹配功能的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
Element-UI 使用el-row 分欄布局的教程
這篇文章主要介紹了Element-UI 使用el-row 分欄布局的教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-10-10