使用 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>
1918
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
