vue權威指南筆記01——樣式的設定
阿新 • • 發佈：2019-01-04
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue自定義樣式</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>