学习要点:
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.lzqidian.com)整理发布!