VUE基础篇Part4（v-bind动态绑定class，style）

本文深入探讨了Vue中v-bind指令的应用，包括如何动态绑定class和style。通过对象语法和数组语法展示了如何灵活管理元素的class列表，并讲解了内联样式绑定的细节，无论是驼峰命名还是短横线分隔命名的css属性都得以支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、了解 v-bind 指令

概念：DOM元素经常会动态的绑定一些 class 属性和 style 样式，v-bind 可以动态的绑定元素的属性，并且更改属性，所以会经常用到

例子：

<div id="app">
	<a v-bind:href="url">点我去百度</a>
    <img v-bind:src="imgUrl" alt="">
</div>

var app = new Vue({
	el:"#app",
    data:{
        url:'http:/baidu.com',
        imgUrl:'https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super'
        }
})

2、绑定 class 的几种方式

2.1 对象语法

给 vbind:class 设置一个对象，可以动态地切换 class，* 值对应true ,false
当 class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的
用法，一般当条件多于两个时，都可以使用 data 或 computed

<style>
	.changeColor{
		color: darkred;
	}
</style>
					        key:value
<div v-bind:class="{changeColor:isActive}">看我变不变颜色</div>

data:{
	isActive: true
}
//isActive 值为true时，文字变红，值为false时，文字变为默认黑色

2.2 数组语法

当需要应用多个 class 时，可以使用数组语法，也是键值对（key:value）

<div v-bind:class="['color':colorActive,'fontSize':fontSizeAvtive]">新津暴徒！孙笑川</div>

data:{
	colorActive:'red',
	fontSizeActive:20 + 'px'
}
//文本变为红色，然后是20px

3 、绑定内联样式 style

使用 v-bind:style （即：style ）可以给元素绑定内联样式，方法与 v-bind:class 类似.

也有对象语法和数组语法，看起来很像直接在元素上写 CSS

注意 : css 属性名称使用驼峰命名（ cameCase ）或短横分隔命名（ kebabcase ）

<div v-bind:style="[style1,style2]">新津暴徒！孙笑川</div>

data:{
	style1:{
		color:'red'
	},
	style2:{
		fontSize: 20 + 'px'
	}
}

//文本变为红色，字体大小为20px，上面两个style也可以放在同一个里面写