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

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

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

前言

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

vue 官網 樣式綁定

往期回顧

先簡單回顧下最開始綁定標簽樣式的操作，當時是采取指定標簽的class屬性作為樣式的修改。

<template>
  <h1>標簽動態(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,
      // 同標簽 多屬性值綁定 可以采取封裝對象的形式實現(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>

但使用拼接字符串的方式進行復雜樣式的綁定，是很容易出現(xiàn)問題的。

因此，vue為class的v-bind指令做了功能增強，除了使用字符串之外，表達式的值也可以是對象或數(shù)組。

綁定對象

v-bind指令，動態(tài)綁定元素屬性的時候，可以采取如下的方式進行對象信息的綁定。

<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}"中，對象的各個屬性值的含義如下：

  • 當變量 isActive 為 true 時，則會使用 active 樣式
  • 當變量 hasError 為 true 時，則會使用 text-danger 樣式

效果如下所示：

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

綁定對象的另一種寫法

上述的綁定操作中，如果出現(xiàn)很多的對象屬性時，采取該方式依舊不能很好的閱讀代碼和維護?？梢詫ο蠖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ù)據，綁定class。如果以其他的語言比如Java來看這個問題，其實數(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ù)據綁定1</div>
    <div :class="arryActClass">數(shù)組樣式數(shù)據綁定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ù)據的寫法，這兩種效果是一樣的。

在數(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ù)據綁定1</div>
    <div :class="arryActClass">數(shù)組樣式數(shù)據綁定2</div>
    <div :class="[isActive?'active text-danger':'green']">數(shù)組樣式數(shù)據綁定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ù)組與對象嵌套的方式，也能進行標簽樣式的綁定。但這里需要注意一個細節(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ù)據綁定1</div>
    <div :class="arryActClass">數(shù)組樣式數(shù)據綁定2</div>
    <div :class="[isActive?'active text-danger':'green']">數(shù)組樣式數(shù)據綁定3</div>
    <h2>數(shù)組嵌套對象</h2>
    <!-- isGreen 變量值為true時，使用 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>

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論