<style>
.basic {
width: 300px;
height: 100px;
border: 1px solid black;
}
.normal {
background-color: darkorange;
}
.happy {
background-color: burlywood;
}
.sad {
background-color: cadetblue;
}
.box1 {
background-color: antiquewhite;
}
.box2 {
border-radius: 10px;
}
.box3 {
font-size: 20px;
font-weight: bold;
}
</style>
<div id="root">
<!-- 绑定class样式--字符串写法 适用于:样式的类名不确定,需要动态指定 -->
<div class="basic" :class="mood" @click="changMood">{{name}}</div> <br />
<!-- 绑定class样式--字符串写法 适用于:要绑定的样式不确定 名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div> <br />
<!-- 绑定class样式--字符串写法 适用于:要绑定的样式确定 名字也确定 但需要动态决定用不用-->
<div class="basic" :class="classObj">{{name}}</div><br />
<!-- 绑定style样式 对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div><br />
<!-- 绑定style样式 数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div><br />
</div>
<script>
Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
new Vue({
el: '#root',
data: {
name: '尚硅谷',
mood: 'normal',
classArr: ['box1', 'box2', 'box3'],
classObj: {
box1: false,
box2: false
},
styleObj: {
fontSize: '40px',
color: 'red'
},
styleArr: [{
fontSize: '50px',
color: 'blue'
},
{
backgroundColor: 'red'
}
]
},
methods: {
changMood() {
// this.mood = 'sad'
const arr = ['happy', 'normal', 'sad']
const index = Math.floor(Math.random() * 3)
this.mood = arr[index]
}
},
})
</script>