vue中class样式与内联样式的绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue样式</title> <script src="../lib/vue.js"></script> <style> .red{ background-color:red; } .color{ color: green; } </style> </head> <body> <div class="app"> <h1 :class="[‘red‘,‘color‘]">我是一个样式</h1> <!-- 注意需要使用v-bind进行属性绑定 --> <h1 :class="[flag?‘red‘:‘‘]">我是一个样式</h1> <!-- 使用三元表达式进行样式设定 --> <h1 :class="[{‘color‘:flag}]">我是一个样式</h1> <!-- 使用一个对象代替三元表达式，增加代码的可读性 --> <h1 :class="[{‘red‘:true,‘color‘:true}]">我是一个样式</h1> <!-- 直接使用对象进行样式设定 --> <h1 :class="obj">我是一个样式</h1> <!-- 直接在vm对象中读取样式数据 --> <!-- *************************以上是通过class来绑定样式***************************** --> <!-- *************************以下是通过内联样式style来绑定样式***************************** --> <h1 :style="{color:‘gray‘,‘font-weight‘:100}">我是一个样式</h1> <!-- 注意当属性名称中含有-时，需要加单引号 --> <h1 :style="obj2">我是一个样式</h1> <!-- 直接使用data中的样式对象设定 --> <h1 :style="[obj2,obj3]">我是一个样式</h1> <!-- 以数组的形式将多个样式对象添加到页面中 --> </div> <script> var vm = new Vue({ el:‘.app‘,data:{ flag:true,obj:{‘red‘:true,‘color‘:true},obj2:{color:‘gray‘,‘font-weight‘:100},obj3:{‘font-style‘:‘italic‘} } }) </script> </body> </html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。