class与v-bind:class两个一起使用
一共有三种写法：
字符串写法；数组写法；对象写法；
<body>
<div id="app">
<div class="bg" >
<h1 :class="txt">字符串写法</h1>
<h1 :class="txtArr">数组写法</h1>
<h1 :class="objClass">对象写法</h1>
</div>
</div>
</body>
<script>
let vm = new Vue({
data() {
return {
字符串：可以动态的绑定一个，样式的类名不确定，需要动态绑定
txt: "text",
数组用法：绑定的个数不定，可以随意增加，名字也不确定，例如背景随意变化时
txtArr: ['box', 'box1'],
对象用法：类名确定、个数确定，用哪个由自己决定
objClass: {
box: true,
box1: true
}
}
},
}).$mount("#app")
</script>
<style type="text/css">
.bg {
background-color: #0066CC;
width: 288px;
height: 288px;
}
.box {
border: #00CE47 2px solid;
}
.box1 {
color: #ce135b;
}
.text {
font-size: 44px;
color: #00CE47;
}
</style>
379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
