<template><d2-container><h3>class使用测试页面</h3><p :class="1 < 2 ? 'red-font' : 'blue-font'">使用三元表达式;</p><p :class="['red-font','blue-bg']">使用数组包含多个类名;</p><p :class="{'red-font':false,'blue-font':true}">使用对象的形式;</p><p :class="redFont">使用变量的形式;</p></d2-container>
</template><style lang="scss" scoped>
.red-font {color: red;
}
.blue-font {color: blue;
}
.blue-bg {background: blue;
}
</style><script>
export default {data () {return {redFont: 'red-font'}},
}
</script>