操作元素的class列表和内联样式是数据绑定的一个常见需求，因为它们都是属性，所以可用v-bind处理，通过表达式计算出字符串结果即可。不过字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue做了专门增强，表达式结果类型除了字符串之外，还可是对象或数组。
- Class绑定
- Style绑定
绑定HTML Class
对象语法
可传递给v-bind:class一个对象用以动态地切换class
# active这个class存在与否将取决于数据属性isActive的truthiness
<div v-bind:class="{active:isActive}"></div>
可在对象中传入更多属性来动态切换多个class
v-bind:class指令也可与普通的class属性共存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div id="app">
<div class="alert" v-bind:class="{show:isActive, 'alert-danger':hasError}">message</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
isActive:true,
hasError:true
}
});
</script>
</body>
</html>
当isActive或hasError变化时，class列表将相应地更新。
绑定的数据对象不必内联定义在模块里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div id="app">
<div v-bind:class="klass">message</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
klass:{
'container':true,
'well':true
}
},
});
</script>
</body>
</html>
也可绑定一个返回对象的计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div id="app" class="container">
<div class="alert" v-bind:class="klass">message</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
error:null,
warning:true
},
computed:{
klass:function(){
return {
'alert-danger' : this.error && this.error.type==='fatal',
'alert-warning' : this.warning && !this.error
}
}
}
});
</script>
</body>
</html>
数组语法
可将一个数组传递给v-bind:class以应用一个class列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div id="app" class="container">
<div v-bind:class="[alertClass,activeClass]">message</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
alertClass:'alert',
activeClass:'show'
}
});
</script>
</body>
</html>
也可使用三元表达式根据条件切换列表中的classs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div id="app" class="container">
<div v-bind:class="[alertClass,isActive?activeClass:'hide']">message</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
isActive:true,
alertClass:'alert',
activeClass:'show'
}
});
</script>
</body>
</html>
当多个条件class写法会繁琐，可在数组中使用对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div id="app" class="container">
<div v-bind:class="[alertClass,{show:isActive}]">message</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
isActive:true,
alertClass:'alert',
}
});
</script>
</body>
</html>
组件应用
在自定义组件上使用class属性时，这些类将被添加到该组件的根元素上，当前元素上已存在的类不会被覆盖。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div id="app" class="container">
<alert class="alert-success"></alert>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('alert',{
template:'<p class="alert"><p>'
});
var vm = new Vue({
el:'#app',
data:{}
});
</script>
</body>
</html>
对于带数据绑定的class也同样适用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div id="app" class="container">
<alert v-bind:class="{'alert-danger':hasError}"></alert>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('alert',{
template:'<p class="alert"><p>'
});
var vm = new Vue({
el:'#app',
data:{
hasError:true
}
});
</script>
</body>
</html>
绑定内联样式
对象语法
v-bind:style 的对象语法十分直观，看着很像CSS，但其实是一个JS对象。
CSS属性名可用驼峰法(camelCase)或短横线分割(kebab-case，需使用单引号包裹)来命名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div id="app" class="container">
<div v-bind:style="{color:color, fontSize:fontsize+'px'}">message</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
color:'red',
fontsize:20
}
});
</script>
</body>
</html>
直接绑定到一个样式对象可使模板更清晰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div id="app" class="container">
<div v-bind:style="style">message</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
style:{
color:'red',
fontSize:'20px'
}
}
});
</script>
</body>
</html>
同样的，对象语法常结合返回对象的计算属性使用。
数组语法
v-bind:style的数组语法可将多个样式对象应用到同一个元素上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div id="app" class="container">
<div v-bind:style="[baseStyle,overStyle]">message</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
baseStyle:{
color:'red',
fontSize:'20px'
},
overStyle:{
color:'green',
fontSize:'24px'
}
}
});
</script>
</body>
</html>
自动添加前缀
当v-bind:style使用需添加浏览器引擎前缀的CSS属性，如transform等。Vue会自动侦测并添加相应的前缀。
多重值
从Vue2.3.0+开始可为style绑定中的属性提供一个包含多个值的数组，常用语提供多个带前缀的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div id="app" class="container">
<div :style="{display:['-webkit-box', '-ms-flexbox', 'flex']}">message</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
}
});
</script>
</body>
</html>
