1、案例1
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>强制绑定class属性</title> <style> .aClass { color: yellow; } .bClass { color: blue; } .cClass { font-size: 50px; } </style> </head> <body> <div id="app"> <!--p标签会同时有aClass和cClass--> <p class="aClass" :class="c">XXXXXXXXXXXXXXXXXXXXX</p> <!--p标签只有bClass--> <p :class="{bClass:true,cClass:isc}">XXXXXXXXXXXXXXXXXXXXX</p> <!--p标签同时有bClass和cClass--> <p :class="[b,'cClass']">XXXXXXXXXXXXXXXXXXXXX</p> </div> <script src="../js/vue.js" type="text/javascript"></script> <script> const vm = new Vue({ el: "#app", data: { a: "aClass", b: "bClass", c: "cClass", isc: false } }); </script> </body> </html>