1.class(使用v-bind绑定)
a.字符串方式(类名不确定时,且需要动态获取)
添加bind要从data中获取数据,因此需要在vue中声明
b.数组(绑定多个样式,数量不确定,名称也不确定)
c.对象(要绑定多个样式,数量,名字确定,但是不确定是否使用)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
margin: 10px;
}
.box1{
background-color: pink;
}
.box2{
border:10px solid red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="b1"></div>
<div v-bind:class="b2"></div>
<div v-bind:class="b3"></div>
</div>
<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
b1:"box1",
b2:['box1','box2'],
b3:{box1:false,box2:true},
}
})
</script>
</body>
</html>
2.style
当对象中的属性值与data中的属性名相同时,可以直接写属性名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div id="app">
<div style="font-size: 30px;font-weight:bold;color:red">123</div>
<div v-bind:style="{fontSize:size,color}">123</div>
</div>
<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
size:"50px",
color:"red"
}
})
</script>
</body>
</html>