1. class样式
写法:class=“xxx” xxx 可以是字符串、对象、数组。
2. style样式
:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
3.代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>绑定样式</title>
<style>
.basic {
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy {
border: 4px solid red;
;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg, yellow, pink, orange, yellow);
}
.sad {
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal {
background-color: skyblue;
}
.atguigu1 {
background-color: yellowgreen;
}
.atguigu2 {
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.atguigu3 {
border-radius: 20px;
}
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
绑定样式:
1. class样式
写法:class="xxx" xxx可以是字符串、对象、数组。
2. style样式
:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
-->
<div id="root">
<!-- 绑定class样式 -- 字符串写法 适用于绑定少量样式-->
<!-- 可以使用三元表达式 选择你想要的样式-->
<div class="basic" v-bind:class="1==1 ? mood : 'mxp'" v-on:click="changeMood">{{name}}</div><br>
<!-- 数组写法 适用于绑定多个样式--->
<div class="basic" :class='classArr'>{{name}}</div><br>
<!-- 对象写法 -->
<div class="basic" :class='classObj'>{{name}}</div><br>
<!-- 绑定style样式 -->
<!-- 对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div><br>
<!-- 数组写法 -->
<div class="basic" :style="[styleObj,styleObj2]">{{name}}</div><br>
<div class="basic" :style="styleArr">{{name}}</div><br>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data: {
name: '国庆快乐',
mood: 'normal',
classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
classObj: {
atguigu1: false,
atguigu2: true
},
styleObj: {
fontSize: 50 + 'px',
color: 'red'
},
styleObj2: {
backgroundColor: 'orange'
},
styleArr: [
{
fontSize: 50 + 'px',
color: 'red'
},
{
backgroundColor: 'orange'
}
]
},
methods: {
changeMood(e) {
//随机选择一个样式
const arr = ['happy', 'sad', 'normal']
const index = Math.floor(Math.random() * 3)
this.mood = arr[index]
}
},
})
</script>
</html>