绑定 HTML class
:class
(v-bind:class
的缩写)
:class
指令也可以和一般的 class
attribute 共存
绑定的对象并不一定需要写成内联字面量的形式,也可以直接绑定一个对象
可以给 :class
绑定一个数组来渲染多个 CSS class
绑定内联样式
:style
支持绑定 JavaScript 对象值,对应的是 HTML 元素的 style
属性
尽管推荐使用 camelCase,但 :style
也支持 kebab-cased 形式的 CSS 属性 key (对应其 CSS 中的实际名称)
可以给 :style
绑定一个包含多个样式对象的数组
<template>
<span>
<span class="redColor fSize bgColor"> Hello World </span><br />
<span :class="{ redColor: true, fSize: true, bgColor: true }"> Hello World </span><br />
<span :class="{ redColor: isTrue, fSize: isTrue, bgColor: isTrue }"> Hello World </span><br />
<span :class="[ 'redColor', 'fSize', 'bgColor' ]"> Hello World </span><br />
<span :style="{ color: 'red', fontSize: '20px', 'font-size':'22px' }"> Hello World </span><br />
<span :style="[ redColor, fSize]"> Hello World </span><br />
<span :class="{redColor: isActive===0}" @click="f1(0)">首页</span>
<span :class="{redColor: isActive===1}" @click="f1(1)">关于我们</span>
<span :class="{redColor: isActive===2}" @click="f1(2) ">公司产品</span>
</span>
</template>
<script>
export default {
data() {
return {
isTrue: true,
redColor: {
color: 'red'
},
fSize: {
fontSize: '20px'
},
isActive: 1
}
},
methods: {
f1(i) {
console.log(i)
this.isActive = i
}
}
}
</script>
<style>
.redColor {
color: red
}
.fSize {
font-size: 20px;
}
.bgColor {
background: #666;
}
</style>
官方文档: Class 与 Style 绑定 https://cn.vuejs.org/guide/essentials/class-and-style.html#binding-inline-styles