shangrila-xiu

112
文章
101
分类
33
标签

classAndStyle

class与style的讲解

class和style的属性讲解，他们的用法和img的src属性差不多，都需要v-bind绑定：

class显示的方式是背景图片，style的显示方式是字体颜色。

1、class的属性（一）：

简写：
1
:class="xxx"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.active{
				background: red;	
			}
			.red{
				background-color: #E4B9C0;
			}
			.blue{
				background: blue;
			}
		</style>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body id="box">
		<div v-bind:class="{active:isActive}">1qqq</div>
		<div :class="[red]">2222</div><!--red是data中的数据-->
		<div :class="{red:true}">qqqq</div><!--red不是data中的数据,样式在style中写有-->
		<script type="text/javascript">
			window.onload=function(){
				new Vue({
					el:'#box',
					data:{
						isActive:true,
						red:'blue',
						}
				});
			};
		</script>
	</body>
</html>

2、class属性（二）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			.red{
				background-color: #E4B9C0;
			}
			.blue{
				background: blue;
			}
		</style>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body id="box">
		<div v-bind:class="{red:a,blue:b}">1qqq</div>
		<script type="text/javascript">
			window.onload=function(){
				new Vue({
					el:'#box',
					data:{
						//当b为true时，背景颜色就变成蓝色
						a:true,
						b:false
					}
				});
			};
		</script>
	</body>
</html>

3、class的属性（三）：json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.red{
				background: red;
			}
			.blue{
				background: blue;
			}
			
		</style>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body id="box">
		<div v-bind:class="json">1qqq</div>
		<script type="text/javascript">
			window.onload=function(){
				new Vue({
					el:'#box',
					data:{
						json:{
							red:true,
							blue:false
						}
					}
				});
			};
		</script>
	</body>
</html>

4、style的属性与class的一样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			.red{
				background-color: #E4B9C0;
			}
			.blue{
				background: blue;
			}
		</style>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body id="box">
		<div :style="{color:'#FF4949'}">json中的，写json的时候也是在data中写</div><!--json-->
		<div :style="[c]">data中的,且写法是json的</div><!--data中的数据-->
		
		<script type="text/javascript">
			window.onload=function(){
				new Vue({
					el:'#box',
					data:{
						c:{
							color:'#00ffff',//字体颜色
							fontSize:'20px',
							backgroundColor:'#00ccff'//背景颜色的命名方法是驼峰命名法
						}
					},
				});
			};
		</script>
	</body>
</html>

style：

1
2
3
4
:style="{}" -------->json的写法
:style="[c]"-------->在data中写，但是值是json格式的
:style="[c,b]"
------------------------>复合样式，必须采用驼峰命名法：如backgroundColor,fontSize