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

最新推荐文章于 2023-03-09 23:11:08 发布
最新推荐文章于 2023-03-09 23:11:08 发布
阅读量3.1k 收藏 1
点赞数 4
分类专栏： # Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43852058/article/details/116446952
版权

文章目录

因为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值

秀聚
关注
专栏目录
22.Vue绑定class样式
爱米酱的博客
06-17 983
为了讲好class样式，我们这里提前准备了7个样式作为例子来讲解。 basic就是最基本的边框。happy,sad,normal代表了3种心情，这三种心情在设置的时候需要3选一。这三个不能同时应用。而add1,add2,add3是可以同时使用的咱们先看看这两部分样式的效果：互斥部分：兼容部分：讲到这里7个样式我们就说完了，接下来我们就操作一下。需求1：basic是基础的，点击div将样式从normal切换为happy这个时候有人就会想这样去实现，给这个div绑定点击事件，在事件中根据这个div的id获
vue组件内部绑定class还有style样式
胡世林的博客
07-17 8063
vue-cli vue 组件 vue class与style的绑定
Vue中如何自定义组件实现组件化开发（案例步骤及组件传值）
weixin_45745641的博客
10-18 532
在前端项目中，对于大面积可以复用的地方我们通常对其进行组件化的封装，从而提高代码复用率，简化开发，也便于后期对代码进行维护和修改。
vue 组件传值class值
weixin_35749440的博客
01-03 730
在 Vue 中，组件之间可以通过 props 属性进行传值。 例如，如果你希望父组件能够给子组件传递一个 class 值，你可以在父组件中使用如下代码： <template> <child-component class="some-class"></child-component> </template> ...
VUE 组件之间的传递
weixin_42727360的博客
07-06 224
VUE 组件之间的传递 一般提到组件的传递会想到props、$ref 、 emit、emit、emit、parent、children、children、children、root、中心事件bus,后面会继续完善。 1.父向子 通过 props 传递数据 parent.vue <template> <div class="parent"> 父亲：{{mes...
vue--给子组件根元素添加class属性
踏步修行
06-12 9433
例子： 1.声明自定义组件 Vue.component('my-component', { template: '<p class="foo bar">Hi</p>' }) 2.调用组件，添加class属性 <my-component class="baz boo"></my-component> 3.结果 <p class="foo ...
vue 绑定 添加class 属性 4种方法 添加style 3中方法 v-bind
欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈
08-06 8932
动态设置class样式
vue计算属性+vue中class与style绑定(推荐)
10-15
本文将重点探讨Vue中的两个核心特性：计算属性（Computed Properties）以及如何在模板中绑定类（Class）和样式（Style）。这些特性极大地提升了Vue应用的可维护性和表现力。 ### Vue计算属性 计算属性是Vue中用于...
详解Vue.js动态绑定class
10-20
Vue.js的核心是一个响应的数据绑定系统，它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM 将与数据保持同步...基于这种特性，通过vue.js动态绑定class就变得非常简单。一起来看下吧
Vue组件间传值详解
月光晒了很凉快的博客
09-08 1456
（注意这里是自定义的属性名称，而不是父组件数据源中的数据名称）示例：
class02：Vue基础与指令
qq_51667621的博客
03-09 350
想要使用vue，就必须创建一个vue实例，且传入一个配置对象。
在Vue中使用样式:class样式和style内联样式
m0_46322755的博客
05-11 1246
在Vue中使用样式:class样式和style内联样式
vue2.0 class声明组件_Vue 组件之间常用的通信方式
weixin_39906521的博客
11-25 234
Vue 组件之间常用的通信方式props总线 eventbusvuex自定义事件关系情况$parent$children$root$refsprovide/inject非 prop 特性$attrs$listenerprops 父->子传值 用属性 parent <child :faData = '来自父亲'></child> child prop...
Vue组件间数据传递常用方法
lwx931449660的博客
11-23 797
1，props 父传子，在子组件中利用props属性来接受数据， 第一步，在子组件中定义需要传递的props数据，定义props应该按照验证方式，为props中的值提供一个带有验证需求的对象。 // 子组件 menu-tree props: { className: { type: String, // props的类型，这是props的基本类型检查 required: true, // 是否必填 default: 'chart' // 默认值 ..
vue.js -- 样式绑定
Sun_blog
07-07 223
目录内嵌式字符串形式对象形式数组形式行内式字符串形式对象形式子组件默认继承父组件class子组件内嵌式子组件只有一个最外层节点子组件有多个最外层节点使用$attrs传参 内嵌式 字符串形式 代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
Vue 3 迁移策略笔记—— 第4节：$attrs 包括class&style
Jay的博客
01-27 5059
前言 本笔记主要基于官方文档《迁移策略——$attrs包括class&style》汇总而来。如有理解出入，请以官方文档为主。 概述 Vue 3.x 中， $attrs将包含传递给组件的所有属性，包括class和style Vue 2.x 的$attrs 在 Vue 2.x 中，关于父组件使用子组件有这样一个原则： 默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件
Vue 2.X 文档阅读笔记一 (基础)
一期一会的博客
05-08 587
1.Vue模板语法 插值 vue中插入文本时使用双大括号语法，此时当绑定的数据对象值变动时，插值处的内容会实时更新。如果想执行一次性插值，当数据再次改变但插值处内容不会更新，可以使用v-once指令。 想要在模块上插入真正的html而非html代码，需要使用v-html指令。 如果想要动态修改html特性，如动态修改id、disabled之类的特性，可以使用v-bind指令。示例：<span...
[Vue小技巧] 父组件只需向子组件传递一个参数,子组件即可动态绑定多个class
MS6324_ZAKU的博客
11-11 740
实际项目中,我们经常遇到父组件控制子组件的css问题 具体思路这样的 父组件在子组件的标签上传递一个属性,比如<子组件名称 class-prefix = xxx > 子组件使用props:[ 'classPrefix']来获得 名为classPrefix的属性 因此,子组件中就有个属性classPrefix,他的值是xxx 现在,子组件拥有了父组件传递给他的值 那么就可以动态绑定class,使子组件的标签上的class = ’ xxx’ 为了达到这个目的,需要使用动态绑定v-bind 例如
自学前端开发 - VUE 框架 (一): 基础、模板语法、响应式基础、Class 与 Style 的绑定、渲染
runsong911的博客
11-14 697
自学前端开发 - VUE 框架 (一): 基础、模板语法、响应式基础、Class 与 Style 的绑定
Vue.js 中的 class 绑定语法
最新发布
04-20
可以使用 v-bind:class 或简写方式 :class 进行绑定。例如： ``` <div v-bind:class="{ active: isActive }"></div> ``` 其中，isActive 是一个 data 中的变量，如果它的值为 true，该元素的 class 就会加上 active。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值