Vue给元素添加样式

2019/01/14 16:31
阅读数 8

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>

     

展开阅读全文
red
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部