<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue自定义样式</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <style> .classA { font-size: 16px; color: red; } .classB { font-size: 16px; color: green } .classC { font-size: 16px; color: blue; } </style> </head> <body> <div id="example"> <!--对象：无效例子 <div v-bind:class=" {A}"> 1.对象:不可再设置对象 </div> <div v-bind:class=" {classA : true}"> 2.对象：设置样式名称后，也不可直接设置true </div> <div v-bind:class=" {classA}"> 3.对象: 设置样式名称后，不设置也不会显示 </div> --> <div v-bind:class=" {classA : isShow}"> 1.对象：样式名称(classA)+是否显示的对象(缺一不可) </div> <!--数组无效 <div :class="[classB]"> 1.数组:不可直接设置样式名称 </div> <div :class="[{C:true}]"> 2.数组：设置样式的对象后，也不可以直接设置true </div> --> <div :class="[B]"> 2.1.数组：直接对象赋值样式的名字(classB) </div> <div :class="[{classC: isShow}]"> 2.2.数组：包含一个对象(对象的用法) </div> <!--三元运算：内联样式的设置:可以直接设置true--> <div :style="{'color':isShow? '#000':'#fff'}"> 3.style内联：JSX写法 </div> <div :class="true?A:null"> 4.class内联：单纯对象判断 </div> </div> </body> <script> var examleVM2 = new Vue({ el: '#example', data: { A: 'classA', B: 'classB', C: 'classC', isShow: true, isHidden: false, } }) </script> </html>