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>