VUE.JS中的样式 -class 绑定（笔记）

方法大概可以分为三种

直接传递一个数组,注意:这里的class需要使用 v-bind: 作数据绑定

<h1 :class="['thin','red','italic']">这是一个很大很大的H1</h1>

在数组中使用三元表达式

<h1 :class="['thin','red','italic',flag?'active':'']">

这里的flag是在data中定义的，具体可以翻到本文最下面的整个代码查看

在数组中使用嵌套对象来代替三元表达式,提高代码可读性，这里对象中的属性名可以带引号也可以不带引号,即 {active:flag}

<h1 :class="['thin','red','italic',{'active':flag}]">这是一个很大很大的H1</h1>

在为class使用v-bind绑定对象的时候,对象的属性是类名,由于对象的属性可带引号,也可不带引号,所以这里我没有写引号; 属性的值是一个标识符

<h1 :class="{red:true,thin:true,italic:true,active:true}">这是一个很大很大的H1</h1>

或者直接将对象放在Vue对象的data中

<h1 :class="classObj">这是一个很大很大的H1</h1>
classObj对象已经在data中定义了

最后附上代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue.js"></script>
  <style>
    .red {
      color: red;
    }

    .thin {
      font-weight: 200;
    }

    .italic {
      font-style: italic;
    }

    .active {
      letter-spacing: 0.5em;
    }
  </style>
</head>

<body>

  <div id="app">
    <!-- <h1 class="red thin">这是一个很大很大的H1</h1> -->

    <!-- 第一种使用方式,直接传递一个数组,注意:这里的class需要使用 v-bind:  作数据绑定 -->
    <!-- <h1 :class="['thin','red','italic']">这是一个很大很大的H1</h1> -->

    <!-- 在数组中使用三元表达式 -->
    <!-- <h1 :class="['thin','red','italic',flag?'active':'']">这是一个很大很大的H1</h1> -->

    <!-- 在数组中使用嵌套对象来代替三元表达式,提高代码可读性 -->
    <!-- 这里对象中的属性名可以带引号也可以不带引号,即 {active:flag} -->
    <!-- <h1 :class="['thin','red','italic',{'active':flag}]">这是一个很大很大的H1</h1> -->

    <!-- 在为class使用v-bind绑定对象的时候,对象的属性是类名,由于对象的属性可带引号,也可不带引号,所以这里我没有写引号; 属性的值是一个标识符 -->
    <!-- <h1 :class="{red:true,thin:true,italic:true,active:true}">这是一个很大很大的H1</h1> -->

    <!-- 或者直接将对象放在Vue对象的data中 -->
    <h1 :class="classObj">这是一个很大很大的H1</h1>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true,
        classObj:{red:true,thin:true,italic:true,active:true}
      },
      methods: {

      }
    });
  </script>
</body>

</html>

VUE.JS中的样式 -class 绑定（笔记）

方法大概可以分为三种

猜你喜欢