版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cristina_song/article/details/83152468
此处样式class的名称必须加上引号，否则会将其当做对象的属性，从而使得初始化报错。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue关于class的绑定学习</title>
<script src="./js/vue.min.js"></script>
</head>
<style>
.class-a {
color: #red;
}
.class-b {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="classObject"> 关于class的绑定 </div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
classObject: {
'class-a':false,
//classObject是js对象，而class-a代表的是一个样式，所以必须写成'class-a',用引号括起来。
//否则class-a只能代表classObject的一个属性名称而已，这样vuejs在初始化时，会报错。
'class-b': true
}
}
});
</script>
</body>
</html>
补充：
感觉代码中的classObject有点像散列表，key是一个样式class，而value是boolean类型的值。
从console中获取和改变classObject对象中class-a值，见下图：
用 变量形式 绑定单个 Class 名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue关于class的绑定学习</title>
<script src="./js/vue.min.js"></script>
</head>
<body>
<div id="app">
<div :class="box"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data () {
return {
box: 'yellow'
}
}
})
</script>
</body>
</html>
<style type="text/css">
.yellow{
width: 200px;
height: 200px;
background: red;
}
</style>
用数组形式绑定多个 Class 名，用[]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue关于class的绑定学习</title>
<script src="./js/vue.min.js"></script>
</head>
<body>
<div id="app">
<div :class="[box,shadow]"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data () {
return {
box: 'yellow',
shadow:'shadow'
}
}
})
</script>
</body>
</html>
<style type="text/css">
.yellow{
width: 200px;
height: 200px;
background: red;
}
.shadow{
box-shadow: 10px 10px 5px 0 #999;
}
</style>
用 json 形式 绑定多个 Class 名，用{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue关于class的绑定学习</title>
<script src="./js/vue.min.js"></script>
</head>
<body>
<div id="app">
<div :class="{yellow:show1,shadow:show2}"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data () {
return {
show1:true,
show2:false,
}
}
})
</script>
</body>
</html>
<style type="text/css">
.yellow{
width: 200px;
height: 200px;
background: red;
}
.shadow{
box-shadow: 10px 10px 5px 0 #999;
}
</style>
在Vue.js1.0.19数组也可以使用对象语法, 用数组形式绑定多个 Class 名，用[]同时用 json 形式 绑定多个 Class 名，用{}
<div v-bind:class="[classA, { 'classB': isB, 'classC': isC }]">class绑定</div>
<div v-bind:class="[classA, { classB: isB, classC: isC }]">class绑定</div>
对于classA可以加引号和不加引号，如下代码可以测试
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue关于class的绑定学习</title>
<script src="./js/vue.min.js"></script>
</head>
<style>
.class-a {
color: #FF0000;
}
.classB {
text-decoration: underline;
}
.classC{
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<div id="app">
<!-- 如下两种绑定：加引号和不加引号，都可以 -->
<div v-bind:class="[classA, { 'classB': isB, 'classC': isC }]">class绑定1</div>
<div v-bind:class="[classA, { classB: isB, classC: isC }]">class绑定2</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
classA: 'class-a',
isB: true,
isC: true
}
});
</script>
</body>
</html>