vue绑定class
<style type="text/css"> .active{ width: 200px; height: 200px; background-color: aqua; } </style> <div id="app"> <!-- 通过对象的方式决定是否存在某个类 --> <div :class="{active:isTrue}"></div> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ isTrue:true } }) </script> </body>
直接放置对象、放置数组、以及混合使用
<body> <div id="app"> <!-- 直接放置对象 --> <div class="page" :class="styleObj"></div> <!-- 放置数组 --> <div class="page" :class="styleArr"></div> <!-- 混合使用 --> <div class="page" :class="styleArrObj"></div> </div> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ // 带-符号必须用双引号 styleObj:{active:true,"col-lg-6":true}, styleArr:['col-xs-6','red-bg'], styleArrObj:['abc',{active:true}] } }) </script> </body>