v-bind 对于样式控制的增强-操作class
语法 ::class="对象或者数组“
对象-》键就是类名,值是Boolean值。如果为true表示有这个类,否则没有
数组-》数组中所有的类都会加到盒子身上,本质是一个class列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 20px 20px;
text-align: center;
line-height: 200px ;
}
.pink {
background-color: orangered;
}
.big{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="app">
<div class="box" :class="{pink:false,big:true}">小白痴盒子</div>
<div class="box" :class="['pink','big']">小白痴盒子</div>
</div>
<!-- 引入是开发版本的包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
},
methods: {
},
})
</script>
</body>
</html>