我们可以用v-bind来配class属性，使其可以变化，v-bind的表达式可以写数组，对象，字符串，写数组的时候，一个数组内以逗号隔开，可以'a b','c',abc代表style样式，可以的，一空格隔开，其他的不行。对象是JSDN且内配置项是style样式不带.写true/false。写一整个数组，不可以再在里面写属性了，不能再是变量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue (1).js"></script>
<style>
.static {
border:1px solid black;
width:100px;
height:100px
}
.long{
background:green
}
.short{
color:red
}
</style>
</head>
<body>
<div id="app">
<div class="static long short">
123
</div>
<br>
<div class="static short" v-bind:class="msg">
123
</div><br>
<div class="static" v-bind:class="[msg]">
123
</div><br>
<div class="static" v-bind:class="[c1,c2]">
123
</div><br>
<div class="static" v-bind:class="c4">
123
</div><br>
<div v-bind:class="c3">
123
</div><br>
</div>
<script>
const vm= new Vue({
data(){
return{
msg:"long short",
c1:'long',c2:'short',
//下面
c3:['long short' ,'static'],
c4:{
short:true,
long:true,
}
}}
,
el:"#app"})
</script>
</body>
</html>
