前言
通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数，我们已经更近一步的知道了关于vue的一些知识，本篇博客将进一步探讨vue其它方面的内容，vue中关于class和style绑定，关于class和style我们并不陌生，这个在学习css的时候就是家常便饭了，操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组，所以本章将带你了解vue中如何绑定class和style。
本章目标
- 学会使用绑定class的对象语法
- 学会使用绑定class的数组语法
- 学会使用绑定style的对象语法
- 学会使用绑定style的数组语法
class的对象语法
(1)直接写class属性
(1)可以传给 v-bind:class 一个对象，以动态地切换 class
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthy，如果为truthy则使用active这个类，如果为false则不使用active这个类。
注意：在 javascript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为 假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值。
JavaScript 中的真值示例如下（将被转换为 true，if 后的代码段将被执行）
if (true)
if ({})
if ([])
if (42)
if ("foo")
if (new Date())
if (-42)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)
(2)在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
data中的数据
data: {
isActive: true,
hasError: false
}
结果
<div class="static active"></div>
当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
.red{
background: red;
}
.yellow{
background: yellow;
}
.border{
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<div class="border" :class="{red:red}"></div>
</div>
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const vm=new Vue({
el:'#app',
data:{
red:true, //当red的truthy时，这个类才会生效
}
})
</script>
</body>
</html>
结果：
(2)class作为对象处理
当我们需要在一个元素上绑定很多个类的时候，我们就可能需要写很长很长的代码，这样的代码对于我们今后的维护是十分糟糕的，所以为了解决这个问题，我们可以将需要添加的类抽取出来，作为一个对象处理。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class作为对象处理</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
.red{
background: red;
}
.yellow{
background: yellow;
}
.border{
border: 1px solid black;
}
.radius{
border-radius: 50%;
}
</style>
</head>
<body>
<div id="app">
<div :class="classObj"></div>
</div>
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const vm=new Vue({
el:'#app',
data:{
red:true, //当red的true时，这个类才会生效
classObj:{
red:true,
border:true,
radius:true
}
}
})
</script>
</body>
</html>
结果：
可以看到，我们将需要添加的类作为一个对象，然后绑定，也是一样的效果。
(3)class作为计算属性处理
class作为计算属性，这个的话就比较厉害了，这里可以进行逻辑处理等等
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
.red{
background: red;
}
.yellow{
background: yellow;
}
</style>
</head>
<body>
<div id="app">
<div :class="computeClass"></div>
</div>
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const vm=new Vue({
el:'#app',
data:{
red:true,
yellow:true
},
computed:{
computeClass(){
return {
red:this.red&&this.yellow
}
}
}
})
</script>
</body>
</html>
结果：
class的数组语法
(1)直接绑定在元素上
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表
<div v-bind:class="[activeClass, errorClass]"></div>
data中的数据
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
结果：
<div class="active text-danger"></div>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
.green{
background: green;
}
.border{
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<div :class="[green,border]"></div>
</div>
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const vm=new Vue({
el:'#app',
data:{
green:'green',
border:'border'
}
})
</script>
</body>
</html>
结果：
(2)使用三元表达式绑定
如果你也想根据条件切换列表中的 class，可以用三元表达式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
.red{
background: red;
}
.border{
border: 1px solid green;
}
.green{
background: green;
}
</style>
</head>
<body>
<div id="app">
<div :class="[isActive? red: green]"></div>
</div>
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const vm=new Vue({
el:'#app',
data:{
isActive:false,
red:"red",
green:'green'
}
})
</script>
</body>
</html>
结果：
(3)数组和对象
当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
}
.red{
background: red;
}
.radius{
border-radius: 50px;
}
</style>
</head>
<body>
<div id="app">
<div :class="[{red:red},radius]"></div>
</div>
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const vm=new Vue({
el:'#app',
data:{
red:true,
radius:'radius'
}
})
</script>
</body>
</html>
结果：
style的对象语法
(1)直接绑定style
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data中的数据
data: {
activeColor: 'red',
fontSize: 30
}
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<div :style="{fontSize:fontSize+'px',color:color}">你好</div>
</div>
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const vm=new Vue({
el:'#app',
data:{
color:'red',
fontSize:30
}
})
</script>
</body>
</html>
结果：
(2)用对象绑定style
<div v-bind:style="styleObject"></div>
data中的数据
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<div :style="styleObj">欢迎学习vue绑定style</div>
</div>
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const vm=new Vue({
el:'#app',
data:{
styleObj:{
color:'red',
fontSize:'30px',
fontWeight:'bold'
}
}
})
</script>
</body>
</html>
结果：
(3)用计算属性绑定style
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<div :style="computeStyle">你好</div>
</div>
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const vm=new Vue({
el:'#app',
data:{
bl:false
},
computed:{
computeStyle(){
return{
color:this.bl?'red':'blue',
fontSize:this.bl?'20px':'50px',
fontWeight:this.bl?'bold':'normal'
}
}
}
})
</script>
</body>
</html>
结果：
style的数组语法
(1)直接绑定在元素上
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上
<div v-bind:style="[baseStyles, overridingStyles]"></div>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
display: inline-block;
background: green;
}
</style>
</head>
<body>
<div id="app">
<div :style="[styleObj1,styleObj2]">你好</div>
</div>
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const vm=new Vue({
el:'#app',
data:{
styleObj1:{
color:'red',
},
styleObj2:{
textAlign:'center',
lineHeight:'100px'
}
}
})
</script>
</body>
</html>
结果：
(2)多重值问题
style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="app">
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
</div>
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const vm=new Vue({
el:'#app',
})
</script>
</body>
</html>
结果：