- class样式
写法:class=“xxx” xxx可以是字符串、对象、数组。
字符串写法适用于:类名不确定,要动态获取。
对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。 - style样式
:style=" {fontSize: xxx}" 其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
代码:
<!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>绑定样式</title>
<script type="text/javascript" src="../js/vue.js"></script>
<link rel="shortcut icon" href="../ico—全图标/application/Burn.ico" type="image/x-icon">
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid aquamarine;
}
.happy{
width: 400px;
height: 100px;
border: 1px solid rebeccapurple;
background-color: gray;
}
.sad{
width: 400px;
height: 100px;
border: 1px solid yellow;
}
.normal{
width: 400px;
height: 100px;
border: 1px solid blue;
}
.at1{
background-color: aqua;
height: 30px;
}
.at2{
background-color:firebrick;
height: 30px;
}
.at3{
background-color:gold;
height: 30px;
width: 200px;
}
</style>
</head>
<body>
<div id="root">
<!-- 绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div><br><br>
<!-- 绑定class样式--数组写法,适用于:要绑定的样式个数不确定、名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div>
<!-- 绑定class样式--对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用 -->
<div class="basic" :class="classObj">{{name}}</div><br><br>
<!-- 绑定class样式--对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div><br><br>
<!-- 绑定style样式--数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div><br><br>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;//阻止vue在启动时生成生产提示
//创建Vue实例
new Vue({
el:'#root',//e1用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
data:{
name:'刀郎',//data中用于存储数据,数据供e1所指定的容器去使用,值我们暂时先写成-一个对象。
mood:'normal',
classArr:['at1','at2','at3'],
classObj:{
at1:false,
at2:false,
},
styleObj:{
fontSize:'42px',
color:'red'
},
styleObj2:{
backgroundColor:'yellow'
},
styleArr:[
{
fontSize:'47px',
color:'blue'
},
{
backgroundColor:'orange'
}
]
},
methods: {
changeMood(){
const arr = ['happy','sad','normal']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
},
})
</script>
</html>
结果: