文章目录

  • class
  • 对象类型，动态绑定 {}
  • 动态切换
  • 动静结合
  • 关于写法
  • 数组类型，多个绑定
  • 在组件上使用
  • 单根组件
  • 多根组件，$attrs.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>

结果图:

css less 获取vue中的变量 vue获取class属性_vue

动静结合

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

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

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

运行结果图：

css less 获取vue中的变量 vue获取class属性_vue_02

关于写法

在写的时候，可以不将对象直接写在: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"
	}
}

运行效果：

css less 获取vue中的变量 vue获取class属性_css less 获取vue中的变量_03

在组件上使用

单根组件

对于单根的组件，可以，使用效果和直接在元素上使用是一致的。也可以直接使用静态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>

运行效果：

css less 获取vue中的变量 vue获取class属性_html_04

多根组件，$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>
	`
})

运行结果：

css less 获取vue中的变量 vue获取class属性_App_05


可以看到，使用:class=$attrs.class进行绑定的根元素，获取到了模板上的class值，没有绑定的元素span上则没有模板上传来的class值