0
点赞
收藏
分享

微信扫一扫

23.Vue绑定style样式


目录

​​ 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>

实现效果:

23.Vue绑定style样式_前端

 写法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>

实现效果:

23.Vue绑定style样式_html_02

 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>

实现效果:

23.Vue绑定style样式_vue.js_03

 写法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>

实现效果:

23.Vue绑定style样式_d3_04

3.总结

绑定样式:

        1.class样式

                写法:class="xxx",xxx可以是字符串,对象,数组。

                        字符串写法适用于:类名不确定,需要动态获取

                        对象写法适用于:要绑定多个样式,个数不确定,名字也不确定

                        数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。

        2.style样式

   

:style="{fontSize:xxx}",其中xxx是动态值
:style="{a,b}",其中a,b是样式对象

举报

相关推荐

0 条评论