【Vue】基础系列(四)样式绑定 - class - style
theme: vue-pro highlight: a11y-dark
嗨!~ 大家好,我是YK菌 🐷 ,一个微系前端 ✨,爱思考,爱总结,爱记录,爱分享 🏹,欢迎关注我呀 😘 ~ [微信号:
yk2012yk2012
,微信公众号:ykyk2012
]
「这是我参与11月更文挑战的第18天,活动详情查看:2021最后一次更文挑战」
在应用界面中, 某个(些)元素的样式是变化的,
class
/style
绑定就是专门用来实现动态样式效果的技术
1. class
绑定
javascript
:class='xxx' // xxx可以是字符串、对象、数组。
字符串
1) 表达式是字符串: 'classA'
适用于:类名不确定,要动态获取
```js
{{name}}
```
对象
2) 表达式是对象: {classA:isA, classB: isB}
适用于:要绑定多个样式,个数不确定,名字也不确定
```js
{{name}}
```
数组
3) 表达式是数组: ['classA', 'classB']
适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用
```js
{{name}}
```
2. style
绑定
javascript
:style="{ color: activeColor, fontSize: fontSize + 'px' }"
其中 activeColor
/fontSize
是 data 属性
javascript
:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
对象
```js
{{name}}
```
数组
```js
{{name}}
```
最后,欢迎关注我的专栏,和YK菌做好朋友
「其他文章」
- 【TS】快速上手(四)配置选项 - 编译选项compilerOptions
- 【LeetCode】图解反转链表 - 迭代 - 递归
- 【LeetCode】最大子序和从O(N^3)到O(N) - 暴力初探 - 分而治之 - 在线处理
- 【JS】JavaScript基础知识自我检查大过关(第三关)函数定义与调用
- 【Vue】高级系列(六)Vue-cli配置代理 -demo3-GitHub用户查询-axios
- 【Vue】高级系列(五)组件间通信
- 【Vue】高级系列(四)Vue模块化实战-demo2-任务清单todoList
- 【TS】快速上手(二)类型声明
- 【Vue】高级系列(三)Vue模块化实战-demo1-动态评价页面
- 【Vue】高级系列(二)Vue相关小知识
- 【Vue】高级系列(一)Vue组件定义与使用 - 非单文件组件 - 单文件组件 - VueComponent
- 【Vue】基础系列(十一)Vue指令-常用内置指令-自定义指令-全局指令-局部指令
- 【Vue】基础系列(九)动画与过渡-trasition-enter-leave
- 【Vue】基础系列(八)生命周期 - 初始化显示 - 更新状态 - 死亡状态 - 父子组件
- 【Vue】基础系列(七)v-model - 自动收集数据 - 表单数据自动更新
- 【Vue】基础系列(六)事件处理 - 绑定监听 - 事件修饰符 - 按键修饰符
- 【Vue】基础系列(四)样式绑定 - class - style
- 【Vue】基础系列(二)模板语法 - 插值语法 - 指令语法 - | v-bind | v-model | v-on | v-if | v- show
- 【Vue】实战项目:电商后台管理系统(九)项目优化 上线
- 【Vue】实战项目:电商后台管理系统(八)数据统计模块