學習要點:
1.Class 綁定
2.Style 綁定
本節課我們來開始學習 Vue3.x 的 class 和 style 綁定的方法。
一.Class 綁定
1. 先復習一下前面課程中 v-bind:的用法:v-bind:class 或:class 簡寫即可;
<style>
.red {
color: red;
}
style>
<span v-bind:class="className">Class 綁定效果span>
data() {
return {
className : 'red'
}
},
PS:再重復一次,className 如果作為 v-bind:class 參數的值,是不需要加雙括號的;
2. 如果想通過一個布爾值來實現,是否要加載這個樣式,那么可以改寫成如下:
// 在 data() 創建一個布爾屬性
isRed : false
// 當 isRed 為 false:class='',當為 true 時:class='red',解構語法用{}包含
// {class 名稱 : 布爾屬性}
<span v-bind:class="{red : isRed}">Css 綁定效果span>
PS:這里屬性 className 就沒有被使用,并且支持多個 class 疊加,-號需單引號防解析錯誤;
v-bind:class="{red : isRed, 'big-font' : isBigFont}"
3. 判斷 class 樣式的布爾屬性太多,且指令的參數值太復雜導致壓力大,可簡寫:
<span v-bind:class="classObject">Css 綁定效果span>
data() {
return {
counter : 100,
classObject : {
red : true,
'big-font' : true
}
}
},
PS:使用計算屬性來實現如上的功能:
// 計算屬性
computed : {
classObject() {
return {
red : true,
'big-font' : true
}
}
}
4. 還有一種列表式數組方式:即你添加就有效果,不添加就沒有效果,如下:
<span v-bind:class="[redClass, bigFontClass]">Css 綁定效果span>
data() {
return {
redClass : 'red',
bigFontClass : 'big-font',
}
},
PS:列表式數組也支持類似布爾是否顯示,通過數組的三元來實現;
<span v-bind:class="[isRed ? redClass : '', bigFontClass]">Css 綁定效果span>
PS:三種方式第一次用建議選選其中一種,否則會比較混亂;學習后期,可根據場景查詢使用;
二.Style 綁定
1. 有了 Class 綁定基礎,Style 行內綁定就簡單多了,方式也是類似:
// 解構綁定
<span v-bind:style="{color : styleColor}">Style 綁定效果span>
// 綁定屬性對象或計算屬性綁定
<span v-bind:style="StyleObject">Style 綁定效果span>
// 列表式數組綁定
<span v-bind:style="[redStyle]">Style 綁定效果span>
本文由:蘭州啟點網絡(
www.syzhibo.net)整理發布!