vue基础---06样式绑定
00.样式绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> <style type="text/css"> .page{ width:200px; height:200px; background:red; display:black; } .active{ display:none; } </style> </head> <body> <div id="app"> <!-- 通过对象的方式决定是否存在某个类 --> <div class="page" :class="{active:isTrue}"></div>//":"是v-bind的简写，此处，class有两个值 <!-- 直接放置对象 --> <div class="page" :class="styleObj"></div> <!-- 放置数组 --> <div class="page" :class="styleArr"></div> <!-- 放置字符串 --> <div class="page" :class="styleStr"></div> <!-- 数组和对象混合使用 --> <div class="page" :class="styleArrObj"></div> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ isTrue:true, // 下面对应上面的直接放置对象 styleObj:{active:true,laochen:true},//可以在浏览器查看div的class属性有几个 //下面对应上面的放置数组 styleArr:['col-xs-12','red-bg'],//可以通过push方法添加等 //下面是对应上面的字符串 styleStr:"ment step clone", //下面对应上面的数组和对象混合使用 styleArrObj:['abc',{active:true}] } }) </script> </body> </html> 在控制台输入app.isTrue=false，将.active隐藏，故，page就可以显示出来
