class
与style
都是标签内的属性,可以使用v-bind
指令解析表达式来实现动态添加。vue
对class
与style
做了专门的增强,class
、style
的表达式结果类型可以是字符串、对象或者数组。
给v-bind:class
添加一个字符串
<div v-bind:class="className">class动态绑定div>
<script>
export default {
data() {
return {
className: 'app'
}
}
}
script>
通过改变className
来切换样式。当className
为''
时,class
仍然会被添加到真实DOM
上,只不过没有值而已。
渲染结果:
<div class>class动态绑定div>
给v-bind:class
添加一个对象
<div v-bind:class="{active: isActive}">class动态绑定div>
<script>
export default {
data() {
return {
isActive: true
}
}
}
script>
上面的语法表示 active
这个 class
存在与否将取决于数据isActive
是否为true
。
渲染结果:
<div class="active">class动态绑定div>
因为isActive
是响应式的,当isActive
变为false
时,class
列表也会随之更新,变成:
<div class>class动态绑定div>
对象中可以传入多个className
<div v-bind:class="{active: isActive, danger: isDanger}">class动态绑定div>
<script>
export default {
data() {
return {
isActive: true,
isDanger: true
}
}
}
script>
渲染结果:
<div class="active danger">class动态绑定div>
v-bind:class
也可以与普通的class
并存
<div class="common" v-bind:class="{active: isActive, danger: isDanger}">class动态绑定div>
<script>
export default {
data() {
return {
isActive: true,
isDanger: true
}
}
}
script>
渲染结果:
<div class="common active danger">class动态绑定div>
当需要动态绑定的className
太多时,不需要内联定义在模板中,可以在data
中定义一个对象或者使用计算属性
在data
中定义:
<div class="common" v-bind:class="classObj">class动态绑定div>
<script>
export default {
data() {
return {
classObj: {
active: true,
danger: true
}
}
}
}
script>
使用计算属性
<div class="common" v-bind:class="classObj">class动态绑定div>
<script>
export default {
data() {
return {
isActive: true,
isDanger: true
}
},
computed: {
classObj() {
return {
active: this.isActive,
danger: this.isDanger
}
}
}
}
script>
给v-bind:class
添加一个数组
<div v-bind:class="[className, 'common']">div>
<script>
export default {
data() {
return {
className: 'app'
}
}
}
script>
渲染结果:
<div class="common app">div>
使用数组,里边的值可以是响应式的也可以是普通类名,同时也可以使用三元表达式。
<div v-bind:class="[className, 'common', isActive ? 'active': '']">div>
<script>
export default {
data() {
return {
className: 'app',
isAcive: true
}
}
}
script>
渲染结果:
<div class="common app active">div>
给v-bind:style
添加一个字符串
<div v-bind:style="style">style动态添加div>
<script>
export default {
data() {
return {
style: 'color: red'
}
}
}
script>
v-bind:style
的对象语法十分直观——看着非常像 CSS
,但其实是一个js
对象。CSS
名可以用驼峰式或短横线分隔 (记得用引号括起来) 来命名。
<div v-bind:style="{ color: color, fontSize: fontSize + 'px' }">div>
<script>
export default {
data() {
return {
style: 'red',
fontSize: 30
}
}
}
script>
同样的,style
也可以在data
中定义一个对象或者使用计算属性。
在data
中定义:
<div v-bind:style="styleObj">div>
<script>
export default {
data() {
return {
styleObj: {
color: 'red',
fontSize: '30px'
}
}
}
}
script>
使用对象属性:
<div v-bind:style="styleObj">div>
<script>
export default {
data() {
return {
color: 'red',
fontSize: '30px'
}
},
computed: {
styleObj() {
return {
color: this.color,
fontSize: this.fontSize
}
}
}
}
script>
v-bind:style
的数组语法可以将多个样式对象应用到同一个元素上。
<div v-bind:style="[styleObj, overridingStyles]">div>
<script>
export default {
data() {
return {
color: 'red',
fontSize: '30px',
overridingStyles: {
color: 'blue',
fontSize: '40px'
}
}
},
computed: {
styleObj() {
return {
color: this.color,
fontSize: this.fontSize
}
}
}
}
script>