16.绑定Html class ---(vue入门文档学习记录)

绝地灬酷狼 2021-12-12 06:37 133阅读 0赞

## 绑定Html class ##

我们可以通过v-bind 动态绑定class,通过表达式拼接出结果即可,表达式的类型可以是字符串,对象或者数组.

### 对象语法 ###

例如:

<style>
    		div.active {
    			color: blue;
    		}		
    	</style>
    
    	<body>
    		<div id="app16" v-bind:class="{active:isActive}">name</div>
    		<script>
    			var vm = new Vue({
    				el: "#app16",
    				data: {
    					isActive: true
    				}
    			})
    		</script>
    	</body>

这时显示 蓝色的name,说明class 列表被渲染为active了,将data中isActive值改为false则,name变为默认的黑色字体,说明class列表中已经没有了active ,因此可以证明绑定生效了.

上述可以看出表达式是个对象\{active:isActive\},并且是内联显示的,也可以不必内联定义:  
例如

<style>
    		/*字体蓝色*/
    		div.active {
    			color: blue;
    		}
    		/*斜体*/
    		div.import {
    			font-style:italic;
    		}		
    	</style>
    
    	<body>
    		<div id="app16" v-bind:class="Obj">Lucida Console</div>
    		<script>
    			var vm = new Vue({
    				el: "#app16",
    				data: {
    					Obj: {
    						active:true,
    						import:true
    					}
    				}
    			})
    		</script>
    	</body>

执行后显示为蓝色斜体的"Lucida Console"文字,则可以表明active与import都在class列表中.

### 数组语法 ###

例如:

<style>
       	/*字体蓝色*/
       	p.active {
       		color: blue;
       	}
       	/*斜体*/
       	p.import {
       		font-style:italic;
       	}		
       </style>
       <body>
       	<div id="app17">
       		<p v-bind:class="[isActive,isImport]">lucence</p>
       	</div>
           <script>
           	var vm = new Vue({
           		el:"#app17",
           		data:{
           			isActive:"active",
           			isImport:"import"
           		}
           	})
           </script>
       </body>

可以看到b-bind绑定的是一个数组,执行后字体显示蓝色斜体,说明绑定生效.  
另外,如果数组中属性较多,也可以在数组中使用对象例如:

<style>
    		/*字体蓝色*/
    		div.active {
    			color: blue;
    		}
    		/*斜体*/
    		div.import {
    			font-style:italic;
    		}		
    	</style>
    	<body>
    		<div id="app18" v-bind:class="[Obj,isImport]">Lucida Console</div>
    		<script>
    			var vm = new Vue({
    				el: "#app18",
    				data: {
    					Obj: {
    						active:true
    						
    					},
    					isImport:"import"
    				}
    			})
    		</script>
    	</body>

### 在组件上使用 ###

这个章节是在你对vue组件有一定了解前提下的说明,你可以跳过,回头再来看.

当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。

例如:

<style>
    		/*字体蓝色*/
    		
    		p.active {
    			color: blue;
    		}
    		/*斜体*/
    		
    		p.import {
    			font-style: italic;
    		}
    	</style>
    
    	<body>
    		<div id="app19" >
    			<my-component class="active"></my-component>
    		</div>
    		<script>
    			Vue.component('my-component', {
    				template: '<p class="import">Hi</p>'
    			});
    			var vm=new Vue({
    				el:"#app19"
    			})
    		</script>
    	</body>

上面代码执行后显示蓝色斜体HI,说明两个class 都起了作用,当然也可以通过v-bind绑定动态的class,有兴趣可以自己尝试.

### 总结 ###

我们通过上面的例子可以得出以下结论:

1.  对象通过className : true(真值) 来定义,而数组则通过\[className1,className2\]这种字符串数组直接定义.
2.  数组里可以使用对象属性,对象里不能使用数组属性,对象里的属性都要赋值Boolean值,数组没法赋值(个人理解).
3.  数组也可以使用三元表达式.

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 随机绑定class

在 Vue 中，你可以使用动态绑定 class 的语法来为元素随机绑定 class。首先，你需要定义一个变量来存储你想要绑定的 class 的名称。然后，你可以使用这个变量

比眉伴天荒/ 2024年03月25日 11:32/ 0 赞/ 91 阅读

相关 vue-绑定class样式

1、数组语法我们可以借助于v-bind指令来实现： HTML： <div id="app"> <div v-bind:class="active

喜欢ヅ旅行/ 2023年07月23日 09:56/ 0 赞/ 45 阅读

相关 Vue Class绑定

> 对象语法绑定 HTML Class <div class="static"

分手后的思念是犯贱/ 2022年12月05日 10:20/ 0 赞/ 124 阅读

相关 vue学习记录：事件修饰符、v-model、Class 与 Style 绑定

一、vue.js事件修饰符 1. .stop 阻止冒泡 2. .prevent 阻止默认行为 3. .self 实现只有点击当前元素时候，才会触发事件处理函数 4.

逃离我推掉我的手/ 2022年12月05日 05:27/ 0 赞/ 60 阅读

相关 Vue绑定class

Vue绑定时可以通过传入一个对象，来动态的切换class: <div v-bind:class="\{active:isActive\}" ></div> 这行代码的意思就

缺乏、安全感/ 2022年06月06日 06:43/ 0 赞/ 258 阅读

相关 Vue.js入门学习（三） Class与Style绑定

Class 与 Style 绑定数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用 `v-bind` 处理它们：我们只需要计

港控/mmm°/ 2022年05月20日 02:45/ 0 赞/ 460 阅读

相关 Vue绑定属性绑定Class 绑定style

vue是如何绑定属性和class以及style的下面我将会插入一段代码，本人在代码里做了相当详细的注释。 <template> <!-- v

待我称王封你为后i/ 2022年03月25日 09:36/ 0 赞/ 450 阅读

相关 vue基础：绑定属性class，绑定style

vue基础：绑定属性class，绑定style class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

冷不防/ 2022年03月25日 07:55/ 0 赞/ 394 阅读

相关 16.绑定Html class ---(vue入门文档学习记录)

绑定Html class 我们可以通过v-bind 动态绑定class,通过表达式拼接出结果即可,表达式的类型可以是字符串,对象或者数组. 对象语法例如:

绝地灬酷狼/ 2021年12月12日 06:37/ 0 赞/ 134 阅读

相关 vue动态绑定class

<li v-for="(item,index) in processOptions" class="process-list-item" :class="{ ' is-

╰+哭是因爲堅強的太久メ/ 2021年07月25日 20:53/ 0 赞/ 493 阅读