1.2 绑定多个
我们也可以在对象中传入更多属性用来动态切换多个 class 。
如下代码所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
<style type="text/css">
.active {
width: 100px;
height: 100px;
border: 1px solid red;
background: green
}
.content{
font-size: 14px;
color: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{active:isActive,'content':isShow}">我是div</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
isActive:true,
isShow:true
}
})
</script>
</body>
</html>
运行结果如下：
注意：如果在中设置了与active类同样的样式属性，但属性值不同的话，那么content类设置的属性会覆盖设置的该属性。
我们也可以直接里的一个对象，实现和上述例子同样的效果。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
<style type="text/css">
.active {
width: 100px;
height: 100px;
border: 1px solid red;
background: green
}
.content{
font-size: 14px;
color: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="classObj">我是div</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
classObj:{
active:true,
content:true
}
}
})
</script>
</body>
</html>