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

绝地灬酷狼 2021-12-12 06:37 145阅读 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 条评论，145人围观）

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

相关阅读

相关 vue 随机绑定class

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

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

相关 vue动态绑定class

Vue.js 允许您使用 v-bind 指令或简写的 : 来动态绑定 class 属性。这允许您基于某些条件为元素添加或删除类名，从而实现动态样式控制。以下是一些示例：动态

╰+攻爆jí腚メ/ 2024年02月21日 10:35/ 0 赞/ 43 阅读

相关 19.表单输入绑定----复选框 ---(vue入门文档学习记录)

单个复选框绑定到布尔值: <body> <div id="app-6"> <input type="checkbox" name="

矫情吗；*/ 2023年10月10日 09:48/ 0 赞/ 14 阅读

相关 vue-绑定class样式

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

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

相关 Vue Class绑定

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

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

相关 Vue绑定class

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

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

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

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

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

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

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

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

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

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

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

相关 vue动态绑定class

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

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