vue :class的常用方法

1.：class用来展示某个div的active状态

<template>
 <div class="name">绑定新手机</div>
 <van-field v-model="phone" placeholder="请输入手机号" :class="{'error': errPhone}"/>
  <div class="errorPhone" v-show="errPhone">*请输入正确的手机号码</div>
  </template>
  <script>
export default {
  data() {
    return {
      errPhone: false,
    };
  }
  </script>
  <style lang="scss" scoped>
   .van-field {
    &.error {
      border: 1px solid #f4516c;
    }
  }
  </style>

2.动态的绑定某个值的样式

<template>
  <div class="header-wrap-humber content-row content-row-around content-align-center" :class="isMini?'mini_humber':'normal_humber'" >
  </div>
  </template>
  <script>
export default {
  data() {
    return {
      isMini: false,
    };
  }
  </script>
  <style lang="scss" scoped>
 .mini_humber.header-wrap-humber {
    width: 90%;
    margin: 0 auto;
  }
  .normal_humber {
      width: 60%;
  }
  </style>

3.动态的绑定某个变化的值

<template>
 <span class="square" :class="item.status" v-if="item.status==='invalid'"></span>
  </template>
  <script>
export default {
  data() {
    return {
      isMini: false,
    };
  }
  </script>
  <style lang="scss" scoped>
  .square {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  margin-bottom: 5px;
  background-color: $theme-color;
  &.invalid {
    background-color: #dfe2ea;
  }
  &.warning {
    background-color: #f4516c;
  }
  &.un_start {
    background-color: #666666;
  }
}
  </style>