1.vue动态绑定css
参考
- 三目运算
HTML代码：
<div :class="classA ? 'class-a' : 'class-b' ">Demo1</div>
Javascript代码：
data: {
classA: false,
}
渲染后的HTML:
<div class="class-b">Demo1</div>
- 对象
HTML代码：
<div :class="objectClass">Demo2</div>
Javascript代码：
data: {
objectClass: {
class-a: true,
class-b: false
}
}
渲染后的HTML:
<div class="class-a">Demo2</div>
- computed计算属性
HTML代码：
<div :class="objectClass">Demo3</div>
Javascript代码：
data: {
isActive: true,
error: {
value: true,
type: 'fatal'
}
},
computed: {
objectClass: function () {
return {
base: true,
active: this.isActive && !this.error.value,
'text-danger': this.error.value && this.error.type === 'fatal',
}
}
}
渲染后的HTML:
<div class="bass text-danger">Demo3</div>
- 数组语法
HTML代码：
<div v-bind:class="[activeClass, errorClass]">Demo4</div>
Javascript代码：
data: {
objectClass: {
activeClass: 'active',
errorClass: 'text-danger'
}
}
渲染后的HTML:
<div class="active text-danger">Demo2</div>
- vue动态绑定 style
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
HTML代码：
<div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
Javascript代码：
data: {
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
}
