Vue給元素添加樣式

Vue中使用樣式

綁定css

1. 數組

   1 <style>
   2  .red{ 3  　　color:red 4 　　} 5 　　.thin{ 6     　　font-size:18px 7 　　} 8 </style>
   9 <h1 :class="['red', 'thin']">這是一個邪惡的H1</h1>

2. 數組中使用三元表達式

   <style>
    .red{  　　color:red 　　} 　　.thin{ 　　font-size:18px 　　}
   </style>

   <div id="app">
   　　<h1 :class="['red', isactive?'thin':'']">這是一個邪惡的H1</h1>
   
   </div>

    <script src="./node_modules/vue/dist/vue.js"></script> <script> const vm = new Vue({ el:'#app', data:{ isactive:false, } }) </script>

3. 數組中嵌套對象

   <style> .red{ 　　color:red 　　} 　　.thin{ 　　font-size:18px 　　} </style>
   <div id="app">
   　　<h1 :class="['red', 'thin', {'active': isactive}]">這是一個邪惡的H1</h1>
   </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script> const vm = new Vue({ el:'#app', data:{ isactive:false, } }) </script>

4. 直接使用對象

   <style> .red{ 　　color:red 　　} 　　.thin{ 　　font-size:18px 　　} </style>
   <div id="app">
   　　<h1 :class="{red:true, italic:true, active:true, thin:true}">這是一個邪惡的H1</h1>
   </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script> const vm = new Vue({ el:'#app', data:{ isactive:false, } }) </script>

使用內聯樣式

1. 直接在元素上經過 :style 的形式，書寫樣式對象

   <h1 :style="{color: 'red', 'font-size': '40px'}">這是一個善良的H1</h1>

    

2. 將樣式對象，定義到 data 中，並直接引用到 :style 中

   <div id="app">
         <h1 :style="h1StyleObj">這是一個善良的H1</h1>
   </div>
   
   
   <script src="./node_modules/vue/dist/vue.js"></script>
   <script> let vm = new Vue({
               el:'#app', data: { h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' } } }) </script>

    

3. 在 :style 中經過數組，引用多個 data 上的樣式對象

   <h1 :style="[h1StyleObj, h1StyleObj2]">這是一個善良的H1</h1>
   <script src="./node_modules/vue/dist/vue.js"></script>
    <script> let vm = new Vue({ el:'#app', data: { h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }, h1StyleObj2: { fontStyle: 'italic' } 　　 } })

   </script>