10_绑定样式
<!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>
</head>
<style>
.basic {
width: 140px;
height: 140px;
border: 1px solid red;
}
.happy {
background-color: aqua;
}
.sad {
background-color: beige;
}
.normal {
background-color: skyblue;
}
.atguigu1 {
color: burlywood;
}
.atguigu2 {
font-size: 108px;
}
.atguigu3 {
border: 5px solid orangered;
}
</style>
<body>
<div id="root">
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
<br><br><br>
<div class="basic" :class="classArr">{{name}}</div>
<br><br><br>
<div class="basic" :class="classObj">{{name}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: '#root',
data: {
name: 'vue',
mood: 'normal',
classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
classObj:{
atguigu1:false,
atguigu2:false
}
},
methods: {
changeMood() {
const arr = ['happy', 'sad', 'normal']
this.mood = arr[Math.floor(Math.random() * 3)]
}
}
});
</script>
</html>
绑定样式2
<!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>
</head>
<style>
.basic {
width: 140px;
height: 140px;
border: 1px solid red;
}
</style>
<body>
<div id="root">
<div class="basic" :style="styleObj">{{name}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
name: "vue",
styleObj:{
fontSize:'40px',
color:'red'
}
}
});
</script>
</html>