<template> <div> <div class="border-style"> <h1 :class="class3">-----------------CSS绑定-------------------</h1> <div :class="{'c1':clEnable, 'c2':c2Enable}">CSS属性绑定,注意叠加效果</div> <div :class="calCss">CSS属性绑定 使用计算属性</div> <div :class="[class3,class4]">CSS属性绑定 数组语法</div> <h1 :class="{'c1':c1Enable}">----------------Style绑定---------------</h1> <div :style="{'color':c5,'font-size':c6+'px'}">Style属性绑定</div> <div :style="[c7,c8]">【数组语法】</div> </div> </div> </template> <script> export default { name: 'Css', data() { return { c1Enable: true, c2Enable: true, class3: 'c3', class4: 'c4', c5: 'green', c6: 25, c7: { 'background-color': 'lightblue', }, c8: { color: 'yellow', }, } }, computed: { calCss() { return { c1: true, c2: true, } }, }, methods: {}, } </script> <style scoped> .c1 { color: red; } .c2 { font-size: 40px; } .c3 { color: blue; } .c4 { font-size: 30px; } .border-style { border-width: 2px; border-style: solid; border-color: yellow; } </style>
标签:Style,vue,color,true,绑定,border,CSS From: https://www.cnblogs.com/dwdw/p/16770569.html