10.Vue中绑定class属性，模板中传递class属性

文章目录class对象类型，动态绑定 {}动态切换动静结合关于写法数组类型，多个绑定在组件上使用单根组件多根组件，$attrs.class因为class和style属性的特殊性（可以有多个），在将v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。class对象类型，动态绑定 {}动态切换我们可以传给 :class

色不异空，空不异色

3231人浏览 · 2021-05-06 11:22:14

色不异空，空不异色 · 2021-05-06 11:22:14 发布

文章目录

class

因为class属性的特殊性（可以有多个值），在将v-bind 用于 class 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

class

对象类型，动态绑定 {}

动态切换

我们可以传给 :class (v-bind:class 的简写) 一个对象，以动态地切换 class：
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>class与style的绑定</title>
		<script src="https://unpkg.com/vue@next"></script>
		<style>
			.active {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--类属性active是否存在，取决于isActive是否为真-->
			<div :class="{active: isActive}">
				测试1
			</div>
		</div>
	</body>
	<script>
		const app = {
			data() {
				return {
					isActive: true,
				}
			}
		}

		Vue.createApp(app).mount("#app")
	</script>
</html>

结果图:
在这里插入图片描述

动静结合

:class也可以和class共同存在与同一个元素上，:class动态切换，class必然出现。

只需要改变上边的html代码：

<div id="app">
	<div class="static" :class="{active: isActive}">
		测试1
	</div>
</div>

运行结果图：
在这里插入图片描述

关于写法

在写的时候，可以不将对象直接写在:class后边，可以写在数据区中。
html:

<div id="app">
	<div class="static" :class="myClass">
		测试1
	</div>
</div>

javaScript:

data() {
	return {
		myClass: {
			active: true,
		},
	}
}

当需要有一些运算的时候，可以不写在数据区中，而是写在计算属性中。
html:

<div :class="classObject"></div>

javaScript:

computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组类型，多个绑定

数组类型的话，会把每个数组的元素都添加给class。数组中的元素也可以是对象类型。
style:

<style>
	.active {
		background-color: red;
	}
	.error {
		background-color: aqua;
	}
</style>

html:

<div id="app">
	<div class="static" :class="myClass">
		测试1
	</div>
	<div :class="[activeClass, errorClass]">
		测试2
	</div>
</div>

javaScript:

data() {
	return {
		myClass: {
			active: true,
		},
		activeClass: {
			active: true,
		},
		errorClass: "error"
	}
}

运行效果：
在这里插入图片描述

在组件上使用

单根组件

对于单根的组件，可以，使用效果和直接在元素上使用是一致的。也可以直接使用静态class，也是可以直接添加到组件的根元素上的。

<div id="app">
	<div class="static" :class="myClass">
		测试1
	</div>
	<div :class="[activeClass, errorClass]">
		测试2
	</div>
	<my-component :class="{active: true}"></my-component>
</div>

<script>
	const app = {
		data() {
			return {
				myClass: {
					active: true,
				},
				activeClass: {
					active: true,
				},
				errorClass: "error"
			}
		},
	}

	const vueApp = Vue.createApp(app)
	vueApp.component('my-component', {
		template: '<p class="foo bar">测试3</p>'
	})
	vueApp.mount("#app")
</script>

运行效果：
在这里插入图片描述

多根组件，$attrs.class

如果是多根组件的话，需要使用$attrs.class绑定元素来接收组件上传来的class属性。

<my-component2 class="static" :class="{active: true}"></my-component2>

vueApp.component('my-component2', {
	template: `
		<p :class="$attrs.class">测试4</p>
		<span>这是多根元素测试</span>
	`
})

运行结果：
在这里插入图片描述
可以看到，使用:class=$attrs.class进行绑定的根元素，获取到了模板上的class值，没有绑定的元素span上则没有模板上传来的class值

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^