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