box1和box2都是内部样式
请问为什么在46行 :class="classObj"中的classObj,在55行data:{ }里写的classObj{ box1:true}这里的box1和box2啥的都是属性，为什么可以直接在:class=""中绑定使用呢？？而前面的绑定数组和类名都是字符串，而这里直接绑定对象，然后box1和box2作为属性同样可以生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.basic{
width: 200px;
height: 200px;
border: 1px solid black;
}
.happy{
background-color: aqua;
}
.sad{
background-color: cadetblue;
}
.normal{
background-color: lightgreen;
}
.box1{
border-radius: 15px;
}
.box2{
border-color: lightgreen;
}
.box3{
background-color:skyblue
}
</style>
<script src="./vue.js">
</script>
</head>
<body>
<div id="app">
<div class="basic" :class="mood" @click="click"></div>
<div class="basic" :class="classArr" @click="click1"></div>
<div class="basic" :class="classObj" @click="click"></div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
mood:"",
isMood:true,
classArr:["box1","box2","box3"],
classObj:{
box1:true,
box2:true,
box3:true,
}
},
methods:{
click(){
this.isMood=!this.isMood;
},
},
watch:{
isMood:{
immediate:true,
handler(){
this.mood=this.isMood?"happy":"sad";
}
}
}
})
</script>
</body>
</html>
