Vue.js可以灵活的控制样式
我们首先随便写2个样式
<style> .divCss { background-color: green; width:400px; height:400px; } .fontCss { font-size: large; color:red; } </style>
直接在元素中class="divCss"这样，是老办法了，在Vue中，可以更加灵活
<div id="appDiv" v-bind:class="{divCss:divFlag,fontCss:fontFlag}"> 我是Div中的文字 </div> <script> var v = new Vue({ el: ‘#appDiv‘, data: { divFlag: true, fontFlag: false }, methods: { } }) </script>
用v-bind绑定样式属性，通过类的方式，可以控制某个样式是否生效，例如这里出现的就是绿底黑字，如果把Vue实例中的data.fonFlag改成true，那就是
绿地红字了，这样的好处是，可以方便灵活的控制样式。
当然也可以将元素上的类当作data中的一个属性
<div id="appDiv" > <div v-bind:class="{divCss:divFlag,fontCss:fontFlag}"> 我是Div1中的文字 </div> <div v-bind:class="div2Css"> 我是Div2中的文字 </div> </div> <script> var v = new Vue({ el: ‘#appDiv‘, data: { divFlag: true, fontFlag: true, div2Css: { divCss: true, fontCss: false } }, methods: { } }) </script>
当然如果样式本身是固定不变，也可以用最原始的方法，Vue也提供用数组方式绑定
<div id="appDiv"> <div v-bind:class="{divCss:divFlag,fontCss:fontFlag}"> 我是Div1中的文字 </div> <div v-bind:class="div2Css"> 我是Div2中的文字 </div> <!--这里的fontCss,divCss不是样式名，是Vue实例中的data的属性名--> <div v-bind:class="[fontCss,divCss]"> 我是Div3中的文字 </div> </div> <script> var v = new Vue({ el: ‘#appDiv‘, data: { divFlag: true, fontFlag: true, div2Css: { divCss: true, fontCss: false }, fontCss: ‘fontCss‘, divCss: ‘divCss‘ }, methods: { } }) </script>
p.s:如果不像用class绑定，用style也可以，v-bind:style=" " 就行，方法跟绑定class一样，这里就不写了。
上一篇
原文：https://www.cnblogs.com/luyShare/p/11540556.html