目录
1.style样式对象写法
2.style样式数组写法
3.总结
上一节我们讲了绑定class样式,我们都知道,样式的绑定除了可以使用class绑定,还可以使用style内联的样式。
1.style样式对象写法
注意:对象写法中的参数都要用驼峰写法,而不能使用横杠,否则不会生效,比如font-size应写为fontSize。
写法1:
<!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>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<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;
}
.add1{
background-color: yellowgreen;
}
.add2{
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.add3{
border-radius:20px;
}
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br>
<div class="basic" :class="classArr" >{{name}}</div> <br>
<div class="basic" :class="classObj" >{{name}}</div> <br>
<div class="basic" :style="{fontSize:fsize+'px'}" >{{name}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'class样式',
mood:'normal',
classArr:['add1','add2','add3'],
classObj:{
add1:false,
add2:false
},
fsize:40
},
methods: {
changeMood(){
const arr = ['happy','sad','normal']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
},
})
</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>绑定样式</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<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;
}
.add1{
background-color: yellowgreen;
}
.add2{
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.add3{
border-radius:20px;
}
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br>
<div class="basic" :class="classArr" >{{name}}</div> <br>
<div class="basic" :class="classObj" >{{name}}</div> <br>
<div class="basic" :style="styleObj" >{{name}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'class样式',
mood:'normal',
classArr:['add1','add2','add3'],
classObj:{
add1:false,
add2:false
},
fsize:40,
styleObj:{
fontSize:'40px'
}
},
methods: {
changeMood(){
const arr = ['happy','sad','normal']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
},
})
</script>
</html>
实现效果:
2.style样式数组写法
数组写法会将数组中所有的样式全部显示
写法一:
<!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>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<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;
}
.add1{
background-color: yellowgreen;
}
.add2{
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.add3{
border-radius:20px;
}
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br>
<div class="basic" :class="classArr" >{{name}}</div> <br>
<div class="basic" :class="classObj" >{{name}}</div> <br>
<div class="basic" :style="[styleObj,styleObj2]" >{{name}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'class样式',
mood:'normal',
classArr:['add1','add2','add3'],
classObj:{
add1:false,
add2:false
},
fsize:40,
styleObj:{
fontSize:'40px'
},
styleObj2:{
backgroundColor:'orange'
}
},
methods: {
changeMood(){
const arr = ['happy','sad','normal']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
},
})
</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>绑定样式</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<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;
}
.add1{
background-color: yellowgreen;
}
.add2{
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.add3{
border-radius:20px;
}
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br>
<div class="basic" :class="classArr" >{{name}}</div> <br>
<div class="basic" :class="classObj" >{{name}}</div> <br>
<div class="basic" :style="styleArr" >{{name}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'class样式',
mood:'normal',
classArr:['add1','add2','add3'],
classObj:{
add1:false,
add2:false
},
fsize:40,
styleObj:{
fontSize:'40px'
},
styleObj2:{
backgroundColor:'orange'
},
styleArr:[
{
fontSize:'40px'
},
{
backgroundColor:'orange'
}
]
},
methods: {
changeMood(){
const arr = ['happy','sad','normal']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
},
})
</script>
</html>
实现效果:
3.总结
绑定样式:
1.class样式
写法:class="xxx",xxx可以是字符串,对象,数组。
字符串写法适用于:类名不确定,需要动态获取
对象写法适用于:要绑定多个样式,个数不确定,名字也不确定
数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。
2.style样式
:style="{fontSize:xxx}",其中xxx是动态值
:style="{a,b}",其中a,b是样式对象