<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>

?

總結

以上是生活随笔為你收集整理的vue使用class添加动态类的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。