Vue樣式綁定的幾種實現方式
前言
樣式綁定在vue中屬于一種很常見的操作。在之前博客中針對樣式的綁定操作,介紹了一個指令v-bind
。縮寫為:xxx
。
往期回顧
先簡單回顧下最開始綁定標簽樣式的操作,當時是采取指定標簽的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, // 同標簽 多屬性值綁定 可以采取封裝對象的形式實現 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>
但使用拼接字符串的方式進行復雜樣式的綁定,是很容易出現問題的。
因此,vue為class
的v-bind
指令做了功能增強,除了使用字符串之外,表達式的值也可以是對象或數組。
綁定對象
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,顯示效果如下:
綁定對象的另一種寫法
上述的綁定操作中,如果出現很多的對象屬性時,采取該方式依舊不能很好的閱讀代碼和維護??梢詫ο蠖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>
綁定數組
數組樣式數據,綁定class。如果以其他的語言比如Java來看這個問題,其實數組也是對象的一種形式。
前端代碼如下所示:
<template> <h1>綁定樣式class</h1> <hr> <h2>綁定對象</h2> <!-- <div :class="{active:isActive,'text-danger':hasError}">6666666</div> --> <div :class="objClass">7777777</div> <h2>綁定數組</h2> <div :class="['active','text-danger']">數組樣式數據綁定1</div> <div :class="arryActClass">數組樣式數據綁定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
綁定數組類型數據的寫法,這兩種效果是一樣的。
在數組對象的寫法中,還支持三目表達式的語法,如下所示:
<template> <h1>綁定樣式class</h1> <hr> <h2>綁定對象</h2> <!-- <div :class="{active:isActive,'text-danger':hasError}">6666666</div> --> <div :class="objClass">7777777</div> <h2>綁定數組</h2> <div :class="['active','text-danger']">數組樣式數據綁定1</div> <div :class="arryActClass">數組樣式數據綁定2</div> <div :class="[isActive?'active text-danger':'green']">數組樣式數據綁定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>
數組與對象的嵌套
數組與對象嵌套的方式,也能進行標簽樣式的綁定。但這里需要注意一個細節(jié)。
只能是數組嵌套對象。
主要寫法如下所示:
: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>綁定數組</h2> <div :class="['active','text-danger']">數組樣式數據綁定1</div> <div :class="arryActClass">數組樣式數據綁定2</div> <div :class="[isActive?'active text-danger':'green']">數組樣式數據綁定3</div> <h2>數組嵌套對象</h2> <!-- isGreen 變量值為true時,使用 green 樣式 --> <div :class="['active',{green:isGreen}]">數組嵌套對象</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>
總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
基于vue+uniapp直播項目實現uni-app仿抖音/陌陌直播室功能
uni-liveShow是一個基于vue+uni-app技術開發(fā)的集小視頻/IM聊天/直播等功能于一體的微直播項目。本文通過實例圖文的形式給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友參考下吧2019-11-11element-plus 如何設置 el-date-picker 彈出框位置
el-date-picker 組件會自動根據空間范圍進行選擇比較好的彈出位置,但特定情況下,它自動計算出的彈出位置并不符合我們的實際需求,故需要我們手動設置,這篇文章主要介紹了element-plus 如何設置 el-date-picker 彈出框位置,需要的朋友可以參考下2024-07-07vue3中reactive的對象清空所引發(fā)的問題解決方案(清空不了和清空之后再去賦值就賦值不了)
在使用reactive定義的變量時,直接賦值會失去響應式,為了清空?filters并確保響應式,可以使用Object.assign({},?filters)或者遍歷對象逐個清除屬性,本文介紹vue3中reactive的對象清空所引發(fā)的問題解決方案(清空不了和清空之后再去賦值就賦值不了),感興趣的朋友一起看看吧2025-02-02Vue中import from的來源及省略后綴與加載文件夾問題
這篇文章主要介紹了Vue中import from的來源--省略后綴與加載文件夾,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02