vue使用class添加动态类
生活随笔
收集整理的這篇文章主要介紹了
vue使用class添加动态类
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<template><d2-container><h3>class使用測(cè)試頁面</h3><p :class="1 < 2 ? 'red-font' : 'blue-font'">使用三元表達(dá)式;</p><p :class="['red-font','blue-bg']">使用數(shù)組包含多個(gè)類名;</p><p :class="{'red-font':false,'blue-font':true}">使用對(duì)象的形式;</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>
?
總結(jié)
以上是生活随笔為你收集整理的vue使用class添加动态类的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: idea创建多模块Springboot项
- 下一篇: vue-cli项目布署问题解决:空白页、