使用 class 样式
使用
vuejs
控制样式,会使样式变化的操作更加的灵活
(
1
)
class
样式的使用
案例
1
:传递一个
class
样式的数组,通过
v-bind
做样式的绑定
该形式与之前的形式没有太大的区别
:class="[
样式
1,
样式
2]"
案例
2
:通过三目(元)运算符操作以上数组
boolean?true
执行
:false
执行
案例
3
:使用对象(
json
) 来表达以上三目(元)运算符的操作
{
样式
:flag}
案例
4
:以对象引用样式
:class={}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入vuejs框架 -->
<script src="./lib/vue-2.4.0.js"></script>
<style>
.style1{
color:red;
}
.style2{
background-color: aqua;
}
.style3{
font-style: italic;
}
.style4{
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<!-- <span :class="['style1','style2','style3',flag?'style4':'']">Hello Style</span> -->
<!-- <span :class="['style1','style2','style3',{'style4':flag}]">Hello Style</span> -->
<span :class="{style1:true,style2:true,style3:true,style4:flag}">Hello Style</span>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
flag : false
},
//methods:表示vuejs中对于绑定事件函数的定义,可以同时定义多个函数,多个函数之间使用逗号来进行分隔
methods:{
}
});
</script>
</body>
</html>
案例 5:通过以直接模型 M 的形式做样式渲染
注意:这样使用必须直接将具体的
boolean
值结果(
true/false
)赋值,
不能以
this.
模型的形式来做引用
(
2
)
style
样式补充
在实际项目开发中,对于 style 样式的使用,没有 class 使用的广泛,
通常 style 属性仅仅只是对个别指定元素的样式进行的进一步补充使
用
。
案例
1
:引用样式对象
:style="
引用样式对象
"
注意:在写
color
这样的样式属性的时候,由于仅仅只是一个单词,
所以不需要加引号,开发中的大多数的样式都是包含横杠(
-
)的,
例如:
font-style
,
background-color
等等,在使用这样带有
-
的演示属
性的时候,必须套用在引号中。
'font-style'
'background-color'
color
案例
2
:引用样式对象数组
:style="[
样式对象引用
1,
样式对象引用
2]"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入vuejs框架 -->
<script src="./lib/vue-2.4.0.js"></script>
<style>
.style1{
color:red;
}
.style2{
background-color: aqua;
}
.style3{
font-style: italic;
}
.style4{
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<!-- <span :style="myStyle1">Hello Style</span> -->
<span :style="[myStyle1,myStyle2]">Hello Style</span>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
myStyle1 : {color:'red','font-size':'30px'},
myStyle2 : {'font-style':'italic','background-color':'aqua'}
},
//methods:表示vuejs中对于绑定事件函数的定义,可以同时定义多个函数,多个函数之间使用逗号来进行分隔
methods:{
}
});
</script>
</body>
</html>