Vue 中使用 CSS 非常灵活，可通过 class 和 style 给元素动态绑定 CSS，今天内容详细介绍使用规则：
在未使用 Vue 框架时，可以通过 class 和 style 来给 HTML 元素添加 css，如果想动态修改 css 可直接操作 DOM 元素的属性。在前端小课 第6天：使用CSS的三种方式 中我们讲了 css 的引入方式。
如果想动态修改 css 样式，多多少少有一些不便，vue 解决了这个问题。
一、class
在 Vue 模板中可以直接添加 class 属性，而且支持多种方式，比如对象、数组、JS表达式，这些说白了就是为了能够更灵活修改 class。
如果 css 在代码中不会涉及到修改，直接使用静态的 class 就行：
<divclass="title">《前端小课》</div>
如果，某些 css 会根据不同的业务发生变化，这时就需要进行动态绑定 class，vue 中提供了多种方法：
1. 模板中写对象
这种语法规则类似在 js 中定义一个对象，如果 isDark 为真，将给 h1 元素绑定 dark-text，否则绑定 light-text。
<h1class="title":class="{'dark-text':isDark,'light-text':!isDark}">{{title}}</h1>
需要定义 css dark-text 和 light-text，只有这样才能够把样式渲染到 HTML 元素上。
.dark-text{
color:#fff;
}
.light-text{
color:#000;
}
在 js 中定义属性 isDark，这样可以修改 isDark 的值，样式便可以动态修改。
data(){
return{
isDark:false,
title:'前端小课'
}
}
2. js 中写对象
你可以把动态 class 的逻辑直接写到 JS 代码中，这种写法可以减轻模板中定义太多的业务逻辑。
<h1class="title":class="textMode">{{title}}</h1>
.dark-text{
color:#fff;
}
.light-text{
color:#000;
}
data(){
return{
colorMode:{
dark:false
},
textMode:{
'dark-text':false,
'light-text':true
},
title:'前端小课'
},
methods:{
changeMode(){
constisDark=this.colorMode.dark;
this.textMode['dark-text']=isDark;
this.textMode['light-text']=!isDark;
}
}
},
3. 使用数组
以上两种方式可以通过数组设置多个 class，语法和 js 中的数组定义一致。
<div:class="[contentObj,{stress:isStress}]">本文来自公众号素燕</div>
.content{
color:#000;
font-size:17px;
margin:10px;
}
.stress{
color:red;
}
data(){
return{
isStress:true,
contentObj:{
content:true
}
}
}
4. 使用三元表达式
<div:class="[isStress?stress:'']">本文来自公众号素燕</div>
.stress{
color:red;
}
data(){
return{
isStress:true
}
}
二、style
vue 也可以通过 style 给 HTML 元素设置属性。用法和 class 用法一致。如果希望通过 style 的方式给 HTML 元素设置 css，可以通过 :style 来动态给 HTML 动态绑定 css。
1. 在模板中使用对象
模板中定的对象，给元素设置了字体颜色和字体大小，通过属性值 activeColor 和 fontSize 动态修改元素的字体颜色和大小。
<div:style="{color:activeColor,fontSize:fontSize+'px'}"></div>
data(){
return{
activeColor:'blue',
fontSize:20
}
}
2. 在 js 中定义对象
把设置样式的对象直接定义到 js 中而非模板中。
<div:style="contentStyle"></div>
data(){
return{
contentStyle:{
color:'blue',
fontSize:20
}
}
}
3. 使用数组
把设置样式的对象直接定义到 js 中而非模板中。
<div:style="[contentStyle,{fontSize:fs+'px'}]"></div>
data(){
return{
fs:20,
contentStyle:{
color:'blue'
}
}
}
今天的内容比较简单，基本都是语法规则，大家加油!
原文地址：https://mp.weixin.qq.com/s?__biz=MzI5MTY0ODAwNQ==&mid=2247487814&idx=1&sn=85d4677013ed34cec8fde4867c10f76a&chksm=ec0c362cdb7bbf3a6c8a8cdc64f571571d12d3c295ea98eb9f98628b19bbfb5c3e02da80ac73&mpshare=1&s
