【Vue.js】006-Class 与 Style 绑定

訾博ZiBo

发布于 2025-01-06 15:17:52

2.3K0

一、前言

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

二、绑定 HTML Class

1、对象语法

说明：

我们可以传给 v-bind:class 一个对象，以动态地切换 class；

（细节说明，见代码注释）

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../../js/vue.js"></script>
		<style>
			.active{
				width: 100px;
				height: 200px;
				background-color: aqua;
			}
			.have{
				width: 100px;
				height: 200px;
				background-color: salmon;
			}
			.go{
				width: 100px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<!-- 我们可以传给 v-bind:class 一个对象，以动态地切换 class -->
		<!-- 1、简单使用 -->
		<div id="app" v-bind:class="{ active: isActive }">
			{{ message }}
		</div>
		<!-- 2、绑定的数据对象不必内联定义在模板里 -->
		<div class="app1" v-bind:class="classObject1">
			{{ msg }}
		</div>
		<!-- 3、绑定一个返回对象的计算属性 -->
		<div class="app2" v-bind:class="classObject2">
			{{ msg }}
		</div>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					isActive : true,//当为true则意味active生效
					message : "Hello!"
				}
			});
			var app1 = new Vue({
				el: '.app1',
				data: {
					msg : "Hello!",
					classObject1:{
						have : true
					}
				}
			});
			var app2 = new Vue({
				el: '.app2',
				data: {
					msg : "Hello!"
				},
				computed : {
					classObject2 : function(){
						return {
							go : true
						}
					}
				}
			});
		</script>
	</body>
</html>