Vue学习（4）

发表于 | 分类于 | | 次阅读

Vue-动态绑定CSS样式

v-bind:class 我们可以赋予它一个对象，这个数据为布尔属性，只有true和false两个值，但其可以根据鼠标事件等外部条件控制其CSS样式，也就是说，只要在v-bind中添加了对象，就可以随时将这个添加的对象所对应的CSS移除，也可以随时增加，当然是可以通过条件改变。下面我用鼠标单击事件动态的改变CSS样式。

html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue.js学习</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<link rel="stylesheet" type="text/css" href="vue.css">
</head>
<body>
	<!--vue-123是一个容器，这个容器要在vue中被引入-->
	<div id="vue-123">
		<h1>动态绑定css</h1>
		<h1>123</h1>
		<button v-on:click="changeColor=!changeColor">change color</button>
		<button v-on:click="changesize=!changesize">change size</button>

		<div v-bind:class="change">
		<span>chanzhuo</span>
		</div>
			</div>
	<!--将123.js链接-->
	<script src="123.js"></script>
</body>
</html>

vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
new Vue({
	el:"#vue-123",
	data:{
		changeColor:false,
		changesize:false
	},
	methods:{
		
	},
	computed:{
		change:function(){
			return {
				changeColor:this.changeColor,
				changesize:this.changesize
			}
		}
	}
});
/*
 * el：全称为element，后面为需要从html中抓获到的元素名称，而且必须是根容器的元素
 * data: 数据的储存，类似于定义变量
 * methods:用来储存各种方法
 * computed:计算属性
 */

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
span{
	display: inline-block;
	background: red;
	margin:10px 0;
	color: #fff;
	padding: 10px;

}
.changeColor span{
	background-color: green;
}
.changesize span{
	width: 500px;
	height: 500px;
}

上面代码：我在div中class属性是一个计算属性的方法，该属性return了一个对象，因为class中必须为对象。在我的data中声明了两个数据，他们初始值都为flase，也就是说在class中不会出现这两个对象，因为他们的值是flase，只有class中对象的值为ture才会引进这个css。我在上面加了两个button，触发鼠标点击事件，把changecolor和changesize的值取反为ture，在div中就会引入为ture的css，样式改变

0%