.active {
font-style: italic;
}
.default {
text-decoration: underline;
}
.size {
font-size: 18px;
}
.color {
color: #6699FF;
}
.line {
text-decoration: line-through;
}
.size {
font-size: 24px;
}
(1)内联绑定
(2)非内联绑定
(3)使用计算属性返回样式对象
(1)普通形式
(2)在数组中使用条件运算符
(3)在数组中使用对象
(1)内联绑定
(2)非内联绑定
(3)使用计算属性返回样式对象
let vm = new Vue({
el: '#app',
data: {
isActive: true,
isSize: true,
isColor: true,
isLine: true,
lineClass: 'line',
sizeClass: 'size',
classObject: {
size: true,
color: true
},
weight1: 'bold',
fontSize: 30,
size: {fontSize:'24px'},
weight2: {'font-weight': 'bold'},
decoration: {'text-decoration': 'underline'},
styleObject: {
fontWeight: 'bold',
'font-size': '30px'
},
arrStyle:[
{fontSize: '24px'},
{'font-weight': 'bold'},
{'text-decoration': 'underline'}
]
},
computed: {
show1: function() {
return {
size: this.isSize,
color: this.isColor
}
},
show2: function() {
return {
fontWeight: this.weight1,
'font-size': this.fontSize+'px'
}
}
}
})