Vue的学习之路七：v-bind绑定class样式

亥虫

3452人浏览 · 2020-05-23 11:16:41

亥虫 · 2020-05-23 11:16:41 发布

<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改变样式

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^