01.绑定样式
<!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 type='text/javascript' src="../JS/vue.js"></script>
<style>
.basic {
width: 200px;
height: 50px;
border: 2px solid red;
text-align: center;
line-height: 50px;
}
.normal {
border: 2px solid blue;
background-color: pink;
}
.happy {
border: 2px solid rgb(114, 240, 11);
background-color: rgb(88, 47, 54);
}
.sad {
border: 2px solid rgb(14, 15, 12);
background-color: rgb(155, 72, 33);
}
.vue1 {
border-radius: 8%;
}
.vue2 {
font-size: 30px;
}
.vue3 {
background-color: red;
}
</style>
</head>
<body>
<div id="root">
<!-- 绑定class样式-字符串写法,适用于:要绑定的样式类名不确定,需要动态指定 -->
<div class="basic" :class='mood' @click='changeMood'>{{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;
new Vue({
el: '#root',
data: {
name: 'vue学习',
// 字符串写法
mood: 'normal',
// 数组写法
classArr: ['vue1', 'vue2', 'vue3'],
// 对象写法
classObj: {
vue1: false,
vue2: false
},
styleObj: {
fontSize: '40px',
color: 'red'
},
styleObjo: {
backgroundColor: 'blue'
},
styleArr: [{
fontSize: '40px',
color: 'red'
}, {
backgroundColor: 'blue'
}]
},
methods: {
changeMood() {
// 我们的需求是:在3个样式中,发生点击事件之后随机选择
const arr = ['happy', 'sad', 'normal']
// random意思是:0-1随机取值
// Math.random() * 3 的意思:0-3随机取值,不会有3开头的。
// Math.floor(Math.random() * 3)的意思是:随机取值后,向下取整,在此只能取到012。
const index = Math.floor(Math.random() * 3)
this.mood = arr[index]
}
},
})
</script>
</body>
</html>