标签：对象 java ack abc 混合 red height bsp css
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>
css内联样式变量拼接
<body> <div id="app"> <div style="width: 100px;height: 100px;background-color: bisque;"></div> <!-- css内联样式变量拼接 --> <div style="width: 100px;height: 100px;background-color: bisque;" :style="{border:borderWidth+‘px solid red‘}"></div> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ borderWidth:50 } }) </script> </body>
标签：对象 java ack abc 混合 red height bsp css
原文地址：https://www.cnblogs.com/by-young/p/12919719.html
