<!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>
<script src="../js/vue.js"></script>
</head>
<body>
<style>
.basic {
width: 500px;
height: 100px;
border: 1px solid #000;
background-color: red;
}
.normal {
width: 500px;
height: 100px;
border: 1px solid #000;
background-color: rgb(239, 165, 165);
}
.happy {
width: 500px;
height: 100px;
border: 1px solid #000;
background-color: orange;
}
.sad {
width: 500px;
height: 100px;
border: 1px solid #000;
background-color: purple;
}
.box1 {
width: 500px;
height: 200px;
border-radius: 50%;
background-color: pink;
}
.box2 {
width: 500px;
height: 200px;
border-radius: 50%;
background-color: rgb(230, 114, 133);
}
.box3 {
width: 500px;
height: 200px;
border-radius: 50%;
background-color: yellow;
}
</style>
<div id="root">
<!-- 绑定class样式 字符串写法 适用于样式的类名不确定 需要动态指定-->
<div class="basic" :class="mood" @click="change">
{{name}}
</div>
<hr>
<!-- 绑定class样式数组写法 适用于：要绑定的样式个数不确定 名字也不确定 -->
<div class="basic" :class="classarr">
{{name}}
</div>
<div class="basic" :class="qwe">
{{name}}
</div>
<br>
<!-- 绑定style样式 ：对象写法-->
<div class="basic" :style="styleObject">{{name}}
</div>
<br>
<br>
<!-- 绑定style样式数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
name: '小王童鞋',
mood: 'normal',
classarr: ['box1', 'box2', 'box3'],
qwe: {
box1: false,
box2: true
},
styleObject: {
fontSize: '50px',
color: 'purple',
backgroundColor: 'skyblue'
},
styleArr: [{
backgroundColor: 'blue'
}, {
fontSize: '60px'
}
]
},
methods: {
change() {
const arr = ['happy', 'sad', 'normal']
const index = Math.floor(Math.random() * 3)
this.mood = arr[index]
}
}
})
</script>
</body>
</html>
