八、class 与 style 绑定（1）

一只小熊猫呀

已于 2023-08-11 11:48:00 修改

阅读量1.5k

点赞数

分类专栏： # Vue.js 3.0 从入门到实战文章标签：对象语法数组语法在组件上使用 class 属性绑定 HTML class

于 2022-09-29 15:05:55 首次发布

本文链接：https://blog.csdn.net/GXL_1012/article/details/127107218

版权

Vue.js 3.0 从入门到实战专栏收录该内容

54 篇文章 9 订阅

订阅专栏

本章概要

绑定 HTML class
- 对象语法
- 数组语法
- 在组件上使用 class 属性

HTML 元素有两个设置样式的属性：class 和 style ，前者用于指定样式表中的 class，后者用于设置内联模式。
在 Vue.js 中可以用 v-bind 指令来处理它们，只需要通过表达式计算出字符串结果即可。
不过，字符串拼接比较玛法，而且容易出错，因此，在将 v-bind 指令用于 class 和 style 时，Vue.js 专门做了增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

8.1 绑定 HTML class

8.1.1 对象语法

可以给 v-bind:class 传递一个对象，以动态地切换 class。如下：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>class绑定</title>
	<style>
		.active {
			width: 100px;
			height: 100px;
			background: green;
		}
	</style>
</head>

<body>
	<div id="app">
		<div v-bind:class="{ active: isActive}"></div>
	</div>

	<script src="https://unpkg.com/vue@next"></script>
	<script>
		const vm = Vue.createApp({
			data() {
				return {
					isActive: true
				}
			}
		}).mount('#app');
	</script>
</body>

</html>

<div v-bind:class="{ active: isActive}"></div> 中 active 这个 class 存在与否将取决于数据属性 isActive 的值。isActive 计算为 true 时，这个样式类起作用；反之，则相当于没有加样式。
也可以向对象中传入更多属性来动态切换多个 class 。此外，v-bind:class 指令也可以和普通的 class 属性一起使用。如下：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>class绑定</title>
	<style>
		.static {
			border: solid 2px black;
		}

		.active {
			width: 100px;
			height: 100px;
			background: green;
		}

		.text-danger {
			background: red;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
	</div>

	<script src="https://unpkg.com/vue@next"></script>
	<script>
		const vm = Vue.createApp({
			data() {
				return {
					isActive: true,
					hasError: false
				}
			}
		}).mount('#app');
	</script>
</body>

</html>

最终渲染结果如下：

<div class="static active"></div>

当属性 isActive 或 hasError 改变时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 “static active text-danger”。
绑定的数据对象如果较为复杂，可以在数据属性中单独定义一个对象，然后绑定它。如下：

<div id="app">
  <div v-bind:class="classObject"></div>
</div>
<script>
  const vm = Vue.createApp({
    data() {
      return {
        classObject:{
          active:true,
          'text-danger':false
        }
      }
    }
  }).mount('#app');
</script>

当然，也可以考虑绑定一个返回对象的计算属性，这是一个非常且强大的模式。如下：

<div id="app">
  <div v-bind:class="classObject"></div>
</div>
<script>
  const vm = Vue.createApp({
    data() {
      return {
        classObject:{
          active:true,
          'text-danger':false
        }
      }
    },
    computed:{
      classObject(){
        return {
          active:this.isActive && !this.error,
          'text-danger':this.error && this.error.type === 'fatal'
        }
      }
    }
  }).mount('#app');
</script>

8.1.2 数组语法

除了给 v-bind:class 传递对象外，也可以传递一个数组，应用一个 class 列表。如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>class绑定</title>
		<style>
			.active {
				width: 100px;
				height: 100px;
				background: green;
			}
			.text-danger {
				background: red;
			}
		</style>
	</head>
	<body>
		<div id = "app">
		   <div v-bind:class="[activeClass, errorClass]"></div>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
    		    data() {
    		        return {
    		            activeClass: 'active',
    	  			    errorClass: 'text-danger'
    		        }
    		    }
		    }).mount('#app');
		</script>
	</body>
</html>

渲染结果如下：

<div class="active text-danger"></div>

也可以使用三元表达式根据条件切换 class ，如下：

<div v-bind:class="[isActive ? activeClass : '' , errorClass]"></div>
<script>
  const vm = Vue.createApp({
        data() {
            return {
                activeClass: 'active',
              errorClass: 'text-danger',
        isActive:true
            }
        }
    }).mount('#app');
</script>

样式类 errorClass 将始终添加，而 activeClass 只有在 isActive 计算为 true 时才会添加。
当 class 属性的表达式中有多个条件时，这样写比较繁琐，因为可以在数组语法中使用对象语法来简化表达式。如下：

<div v-bind:class="[{active ：isActive }, errorClass]"></div>

8.1.3 在组件上使用 class 属性

当在一个具有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该组件的根元素上。这个元素上已经存在的 class 不会被覆盖。
例如，声明了以下组件：

const app = Vue.createApp({})
app.component('my-component',{
  template:`<p class="foo bar">hi</p>`
})

然后在使用该组件时添加一些 class：

<my-component class="baz boo"></my-component>

HTML 将被渲染为：

<p class="foo bar baz boo">hi</p>

对于带数据绑定 class 也同样适用：

<my-component v-bind:class="{active:isActive}"></my-component>

当 isActive 计算为 true 时，HTML 将被渲染为：

<p class="foo bar active">hi</p>

如果组件有多个元素，则需要定义哪个元素来接收这个 class ，这是通过使用 attrs 组件属性来指定的。如下代码：

<div id = "app">
   <my-component class="baz"></my-component>
</div>
  <script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({})
  app.component('my-component',{
    template:`
    <p :class="$attrs.class">hi</p>
    <span>this is a child component</span>
    `
  })
</script>