Vue樣式綁定的幾種實(shí)現(xiàn)方式
更新時(shí)間：2024年08月15日 09:42:31 作者：專(zhuān)注寫(xiě)bug
這篇文章主要介紹了Vue樣式綁定的幾種實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
前言
樣式綁定在vue中屬于一種很常見(jiàn)的操作。在之前博客中針對(duì)樣式的綁定操作，介紹了一個(gè)指令v-bind?？s寫(xiě)為:xxx。
往期回顧
先簡(jiǎn)單回顧下最開(kāi)始綁定標(biāo)簽樣式的操作，當(dāng)時(shí)是采取指定標(biāo)簽的class屬性作為樣式的修改。
<template> <h1>標(biāo)簽動(dòng)態(tài)屬性</h1> <!-- <div v-bind:class="dynamicClass"></div> <br/> <div :class="dynamicClass"></div> <br/> <div :class="!isShow?'green':'red'"></div> <br/> --> <div v-bind="dynamicMoreBind"></div> </template>
<script >
export default{
data(){
return{
dynamicClass:"appClass",
isShow:true,
// 同標(biāo)簽 多屬性值綁定 可以采取封裝對(duì)象的形式實(shí)現(xiàn)
dynamicMoreBind:{
id:"moreId",
class:"appClass"
}
}
}
}
</script><style>
.appClass{
color:aqua;
border: solid 1px;
height: 10%;
width: 20%;
}
.green{
color: green;
border: solid 1px;
height: 10%;
width: 20%;
}
.red{
color: red;
border: solid 1px;
height: 10%;
width: 20%;
}
</style>但使用拼接字符串的方式進(jìn)行復(fù)雜樣式的綁定，是很容易出現(xiàn)問(wèn)題的。
因此，vue為class的v-bind指令做了功能增強(qiáng)，除了使用字符串之外，表達(dá)式的值也可以是對(duì)象或數(shù)組。
綁定對(duì)象
v-bind指令，動(dòng)態(tài)綁定元素屬性的時(shí)候，可以采取如下的方式進(jìn)行對(duì)象信息的綁定。
<template>
<h1>綁定樣式class</h1>
<hr>
<h2>綁定對(duì)象</h2>
<div :class="{active:isActive,'text-danger':hasError}">6666666</div>
</template><script>
export default{
data(){
return{
isActive:true, // 如果為true 則使用 .active ，否則不使用
hasError:true
}
}
}
</script><style>
.text-danger{
color: red;
}
.active{
font-size: 50px
}
</style>其中，:class="{active:isActive,'text-danger':hasError}"中，對(duì)象的各個(gè)屬性值的含義如下：
- 當(dāng)變量 isActive 為 true 時(shí)，則會(huì)使用 active 樣式
- 當(dāng)變量 hasError 為 true 時(shí)，則會(huì)使用 text-danger 樣式
效果如下所示：
若其中某個(gè)樣式的值為false，顯示效果如下：
綁定對(duì)象的另一種寫(xiě)法
上述的綁定操作中，如果出現(xiàn)很多的對(duì)象屬性時(shí)，采取該方式依舊不能很好的閱讀代碼和維護(hù)?？梢詫?duì)象定義在tata區(qū)中。
如下所示：
<template>
<h1>綁定樣式class</h1>
<hr>
<h2>綁定對(duì)象</h2>
<!-- <div :class="{active:isActive,'text-danger':hasError}">6666666</div> -->
<div :class="objClass">7777777</div>
</template><script>
export default{
data(){
return{
isActive:false, // 如果為true 則使用 .active ，否則不使用
hasError:true,
objClass:{
'active':true, // 如果為true 則使用 .active ，否則不使用
'text-danger':true
}
}
}
}
</script><style>
.text-danger{
color: red;
}
.active{
font-size: 50px
}
</style>
綁定數(shù)組
數(shù)組樣式數(shù)據(jù)，綁定class。如果以其他的語(yǔ)言比如Java來(lái)看這個(gè)問(wèn)題，其實(shí)數(shù)組也是對(duì)象的一種形式。
前端代碼如下所示：
<template>
<h1>綁定樣式class</h1>
<hr>
<h2>綁定對(duì)象</h2>
<!-- <div :class="{active:isActive,'text-danger':hasError}">6666666</div> -->
<div :class="objClass">7777777</div>
<h2>綁定數(shù)組</h2>
<div :class="['active','text-danger']">數(shù)組樣式數(shù)據(jù)綁定1</div>
<div :class="arryActClass">數(shù)組樣式數(shù)據(jù)綁定2</div>
</template><script>
export default{
data(){
return{
isActive:false, // 如果為true 則使用 .active ，否則不使用
hasError:true,
objClass:{
'active':true, // 如果為true 則使用 .active ，否則不使用
'text-danger':true
},
arryActClass:['active','text-danger']
}
}
}
</script><style>
.text-danger{
color: red;
}
.active{
font-size: 50px
}
</style>展示效果如下：
:class綁定數(shù)組類(lèi)型數(shù)據(jù)的寫(xiě)法，這兩種效果是一樣的。
在數(shù)組對(duì)象的寫(xiě)法中，還支持三目表達(dá)式的語(yǔ)法，如下所示：
<template>
<h1>綁定樣式class</h1>
<hr>
<h2>綁定對(duì)象</h2>
<!-- <div :class="{active:isActive,'text-danger':hasError}">6666666</div> -->
<div :class="objClass">7777777</div>
<h2>綁定數(shù)組</h2>
<div :class="['active','text-danger']">數(shù)組樣式數(shù)據(jù)綁定1</div>
<div :class="arryActClass">數(shù)組樣式數(shù)據(jù)綁定2</div>
<div :class="[isActive?'active text-danger':'green']">數(shù)組樣式數(shù)據(jù)綁定3</div>
</template><script>
export default{
data(){
return{
isActive:false, // 如果為true 則使用 .active ，否則不使用
hasError:true,
objClass:{
'active':true, // 如果為true 則使用 .active ，否則不使用
'text-danger':true
},
arryActClass:['active','text-danger']
}
}
}
</script><style>
.text-danger{
color: red;
}
.active{
font-size: 50px
}
.green{
color: green;
}
</style>
數(shù)組與對(duì)象的嵌套
數(shù)組與對(duì)象嵌套的方式，也能進(jìn)行標(biāo)簽樣式的綁定。但這里需要注意一個(gè)細(xì)節(jié)。
只能是數(shù)組嵌套對(duì)象。
主要寫(xiě)法如下所示：
:class="['active',{green:isGreen}]"案例如下所示：
<template>
<h1>綁定樣式class</h1>
<hr>
<h2>綁定對(duì)象</h2>
<!-- <div :class="{active:isActive,'text-danger':hasError}">6666666</div> -->
<div :class="objClass">7777777</div>
<h2>綁定數(shù)組</h2>
<div :class="['active','text-danger']">數(shù)組樣式數(shù)據(jù)綁定1</div>
<div :class="arryActClass">數(shù)組樣式數(shù)據(jù)綁定2</div>
<div :class="[isActive?'active text-danger':'green']">數(shù)組樣式數(shù)據(jù)綁定3</div>
<h2>數(shù)組嵌套對(duì)象</h2>
<!-- isGreen 變量值為true時(shí)，使用 green 樣式 -->
<div :class="['active',{green:isGreen}]">數(shù)組嵌套對(duì)象</div>
</template><script>
export default{
data(){
return{
isActive:false, // 如果為true 則使用 .active ，否則不使用
hasError:true,
objClass:{
'active':true, // 如果為true 則使用 .active ，否則不使用
'text-danger':true
},
arryActClass:['active','text-danger'],
isGreen:true
}
}
}
</script><style>
.text-danger{
color: red;
}
.active{
font-size: 50px
}
.green{
color: green;
}
</style>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用socket與服務(wù)端進(jìn)行通信的代碼詳解
這篇文章主要給大家介紹了vue如何使用socket與服務(wù)端進(jìn)行通信的相關(guān)資料,在Vue中我們可以將Websocket類(lèi)封裝成一個(gè)Vue插件,以便全局使用,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了使用vue制作滑動(dòng)標(biāo)簽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了vue-cli 關(guān)閉熱更新操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue3之使用js實(shí)現(xiàn)動(dòng)畫(huà)示例解析
這篇文章主要為大家介紹了Vue3之使用js實(shí)現(xiàn)動(dòng)畫(huà)示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
詳解如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 vuex
本篇文章主要介紹了如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 vuex，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue項(xiàng)目實(shí)現(xiàn)文件下載進(jìn)度條功能
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)文件下載進(jìn)度條功能,本文通過(guò)具體實(shí)現(xiàn)代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-09-09
Vue+ElementUI table實(shí)現(xiàn)表格分頁(yè)
這篇文章主要為大家詳細(xì)介紹了Vue+ElementUI table實(shí)現(xiàn)表格分頁(yè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
elementui源碼學(xué)習(xí)仿寫(xiě)一個(gè)el-tooltip示例
本篇文章記錄仿寫(xiě)一個(gè)el-tooltip組件細(xì)節(jié)，從而有助于大家更好理解餓了么ui對(duì)應(yīng)組件具體工作細(xì)節(jié)，本文是elementui源碼學(xué)習(xí)仿寫(xiě)系列的又一篇文章，后續(xù)空閑了會(huì)不斷更新并仿寫(xiě)其他組件2023-07-07
這篇文章主要介紹了Vue.js 中制作自定義選擇組件的代碼附演示demo,通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
vue中h5端打開(kāi)app(判斷是安卓還是蘋(píng)果)
這篇文章主要介紹了vue中h5端打開(kāi)app(判斷是安卓還是蘋(píng)果),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02