由于Class和Style绑定使用频繁，字符串拼接麻烦且易错。因此，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组
<style> .active { color: red } .line { text-decoration: underline } </style> <div id="vm"> <div v-bind:class="{ active: isActive, line:isLine}">abc</div> </div> <script> const v = Vue.createApp({ data() { return { isActive: true, isLine: true } }, }).mount(‘#vm‘) </script>
isActive，isLine是bool值，用来控制该类是否有此名称
运行
<div class="active" v-bind:class="{ line:line}">abc</div>
<style> .active { color: red } .line { text-decoration: underline } </style> <div id="vm"> <div v-bind:class="classObject">abc</div> </div> <script> const v = Vue.createApp({ data() { return { classObject: { active: true, line: true } } }, }).mount(‘#vm‘) </script>
原文：https://www.cnblogs.com/buchizaodian/p/14888077.html