欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue樣式綁定的幾種實(shí)現(xiàn)方式

 更新時(shí)間：2024年08月15日 09:42:31   作者：專注寫bug  
這篇文章主要介紹了Vue樣式綁定的幾種實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

前言

樣式綁定在vue中屬于一種很常見的操作。在之前博客中針對樣式的綁定操作，介紹了一個(gè)指令v-bind。縮寫為:xxx。

vue 官網(wǎng) 樣式綁定

往期回顧

先簡單回顧下最開始綁定標(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)簽 多屬性值綁定 可以采取封裝對象的形式實(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指令，動(dòng)態(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í)，則會(huì)使用 active 樣式
  • 當(dāng)變量 hasError 為 true 時(shí)，則會(huì)使用 text-danger 樣式

效果如下所示：

若其中某個(gè)樣式的值為false，顯示效果如下：

綁定對象的另一種寫法

上述的綁定操作中，如果出現(xiàn)很多的對象屬性時(shí)，采取該方式依舊不能很好的閱讀代碼和維護(hù)。可以將對象定義在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)文章

最新評論