<style>
      .red{
        color: red;
      }
      .thin{
        font-weight: 200;
      }
      .italic{
        font-style: italic;
      }
      .active{
        letter-spacing: 0.5em;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 第一种使用方式,直接传递一个数组,注意:这里的 class 需要使用 v-bind 做数据绑定-->
      <!-- <h1 :class="['red', 'thin', 'italic']">大大的H1</h1> -->

      <!-- 在数组中使用三元表达式 -->
      <!-- <h1 :class="[flag?'active':'', 'thin', 'italic']">大大的H1</h1> -->
      
      <!-- 在数组中使用对象来代替三元表达式,提高代码可读性 -->
      <!-- <h1 :class="['thin', 'italic', {'active': flag}]">大大的H1</h1> -->

      <!-- 在为 class 使用 v-bind 绑定对象的时候,对象的属性是类名,由于对象的属性可带引号,也可不带引号,所以这里没写引号,属性的值是一个标识符 -->
      <h1 :class="classObj">大大的H1</h1>
    </div>

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

使用v-bind绑定class改变样式

  1. ['red', 'thin', 'italic']:直接传递一个数组,数组中的元素用引号括起来,会在style中寻找样式
  2. 三元表达式[flag?'active':'', 'thin', 'italic']:元素不加引号,会在Vue实例的data属性中寻找值
  3. 在数组中使用对象['thin', 'italic', {'active': flag}]:在Vue实例的data属性中寻找flag的值,根据flag的值决定是否加上active类名
  4. 为 class 使用 v-bind 绑定对象:对象的属性是类名,由于对象的属性可带引号,也可不带引号,所以这里没写引号,属性的值是一个标识符
Logo

前往低代码交流专区

更多推荐