vue class style写法
class,
第一种就是把判断的变量放在后面，前面就是判断之后要设置的class名称
v-bind:class="{ active: isActive, 'text-danger': hasError }">
data: {
isActive: true,
hasError: false
}
结果就是<div class="active"></div>
第二种，和第一种得到的结果是一样的
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}第三种
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}第四种，可以是数组的形式
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
结果就是 <div class="active text-danger"></div>第五种，三元来判断
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
第六种，数组语法中使用对象
<div v-bind:class="[{ active: isActive }, errorClass]"></div>style，后面就是{对象}
v-bind:style="{ 'width':item.isActive?'100%':''}"
最前面写上设置的属性名，后面就用三元判断来判断放哪个值
第二种
<div id='app' :style="diaphaneity">555</div>new Vue({
el: "#app",
data: {
editableCheckNum: 0
},
computed: { // a computed getter
diaphaneity: function () { // 若为0
if(!this.editableCheckNum) { // 50%透明度
return 'opacity: 0.5';
} // 否则不添加样式
return '';
}
}
})第三种
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data: {
activeColor: 'red',
fontSize: 30
}
第四种 直接给个样式对象会更加的清晰
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
第五种，可以直接是多个数组值
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>第六种 可以将多个样式对象应用到同一个元素上
<div v-bind:style="[baseStyles, overridingStyles]"></div>
版权声明：本文由Web学习之路发布，如需转载请注明出处。
