Vue给元素添加样式

vue中使用样式

绑定css

数组

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

数组中使用三元表达式

 <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>

数组中嵌套对象

 <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>

直接使用对象

 <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>

使用内联样式

直接在元素上通过 :style 的形式，书写样式对象

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

将样式对象，定义到 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>

在 :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>