Vue学习日记之class样式设置

  我们一般使用样式的时候，有三种方法。

• 外联样式：建立一个外部的CSS样式表，通过link标签进行引入。
• 内联样式：在html中的标签style中编写。
• 行内样式：在标签的style属性中编写。

我们都知道，这样编写的样式是无法运用在表达式上和对象上的。在Vue中，我们可以将样式名作为变量使用，也就是可以将它应用到表达式和对象中。

1  外/内部样式

1.1  作为数组进行引用

  我们可以在标签中使用v-bind:class，将要应用的样式，作为数组的形式输出，但是别忘了要加引号

 <style>
     .red{
         color: red;
     }
        .border{
            border: 2px solid black;
            width: 300px;
        }
        .fontS{
            font-size: 30px;
        }
    </style>
<div id="app">
  <p :class=[red,"border","fontS"]>这是一个样式</p>
</div>


<script>
  var vm=new Vue({
      el:"#app",
      data:{
      
      },
      methods:{

      }
  })
</script>

运行结果：

可以看到没有添加引号的red样式没有应用，而添加了引号的border和fontS都被正确引用了。

我们可以使用v-bind：class来将样式作为数组输出，但是别忘了添加双引号。

 

1.2  样式数组使用三元表达式

  使用vue应用样式的好处之一就是可以使用表达式，一般使用的是三元表达式。

    <style>
     .red{
         color: red;
     }
        .border{
            border: 2px solid black;
            width: 300px;
        }
        .fontS{
            font-size: 30px;
        }
    </style>
<div id="app">
<!--我们这里使用了三元表达式，flag没有添加双引号，作为一个变量，会到data中寻找flag-->
  <p :class=["red","border",flag?"fontS":""]>这是一个样式</p>
</div>


<script>
  var vm=new Vue({
      el:"#app",
      data:{
      flag:false
      },
      methods:{

      }
  })
</script>

运行结果：

  我们在data中创建了一个变量flag，在数组中使用flag时没有使用双引号，flag成为了一个变量，会到data中寻找，flag是一个布尔类型，在flag为true时，使用fontS样式，否则不使用fontS。

在Vue中使用样式时，我们可以将样式作为一个变量去参与表达式的计算。

但是有时候这么写会有些繁琐，所以我们还可以使用，数组中添加对象来简化代码

    <style>
     .red{
         color: red;
     }
        .border{
            border: 2px solid black;
            width: 300px;
        }
        .fontS{
            font-size: 30px;
        }
    </style>
<div id="app">
    <p :class=["red","border",{fontS:flag}]>这是一个样式</p>
</div>


<script>
  var vm=new Vue({
      el:"#app",
      data:{
      flag:false
      },
  })
</sc

运行结果：

 

1.3  作为对象使用

  我们可以将样式作为一个对象去使用

  <style>
     .red{
         color: red;
     }
        .border{
            border: 2px solid black;
            width: 300px;
        }
        .fontS{
            font-size: 30px;
        }
    </style>
<div id="app">
  <p :class={red:flag,border:flag1,"fontS":flag2}>这是一个样式</p>
</div>


<script>
  var vm=new Vue({
      el:"#app",
      data:{
      flag:true,
          flag1:false,
          flag2:true
      },
      methods:{

      }
  })
</script>

运行结果

我们可以看到，我们通过定义了red、border和fontS属性的值来决定是否要应用这个样式，加不加双引号都可以

 

当然了我们为了代码的可读性和降低耦合性，还可以这样子写

<style>
     .red{
         color: red;
     }
        .border{
            border: 2px solid black;
            width: 300px;
        }
        .fontS{
            font-size: 30px;
        }
    </style>
<div id="app">
  <p :class="classObj">这是一个样式</p>
</div>


<script>
  var vm=new Vue({
      el:"#app",
      data:{
       classObj:{red:true,border:false,"fontS":true}
      },
      methods:{

      }
  })
</script>

我们给p标签给定了一个classObj对象，这个对象中存在了各个样式的设置。

 

2  内联样式

  内联样式在vue中的使用跟外联样式的使用差不多，都是使用v-bind指令来进行一个样式的选择和使用，只不过是将class换成了style而已，当然了css属性完全可以用作对象、数组和表达式中。

<div id="app">
    <p :style="styleObj">这是一个样式</p>
</div>


<script>
  var vm=new Vue({
      el:"#app",
      data:{
      styleObj:{
          color:"red",
          "font-size":"30px"
      }
      }
  })
</script>

运行结果：

这里我们需要注意的是，color不加不加双引号都可以，但是font-size是必须要加双引号的！！！

此外我们还可以创建多个style对象使用数组的形式输出

<div id="app">
    <p :style="[styleObj,styleObj1]">这是一个样式</p>
</div>


<script>
  var vm=new Vue({
      el:"#app",
      data:{
      styleObj:{
          color:"red",
          "font-size":"30px"
      },
      styleObj1:{
        border:"2px solid black"
      }
      }
  })
</script>

在vue中使用v-bind:style中如果涉及到一些带有浏览器前缀的CSS时，vue会自动检测添加！！！

在vue中你还可以为css属性设置多个值（通过数组的形式），这个功能常用于带有前缀的浏览器css属性，例如

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">