欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue.js :class动态绑定样式

程序员文章站 2022-04-28 22:53:02
...

本文转自:https://www.cnblogs.com/lwming/p/10925318.html

1.绑定单个class

html部分:此处的active的单引号可以不要

 <div :class="{'active':isActive}"></div>

js部分:判断是否绑定一个active

data() {
    return {
      isActive: true
    };
  }

结果渲染为:

<div class="active"></div>

2.若要绑定多个class,需要逗号隔开就行:(这里的activeTwo加不加引号都可以,也一样都能渲染,如下)

 <div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>

js部分:判断是否绑定对应class

  data() {
    return {
      isActive: true,
      hasError: true
    };
  }

结果渲染为:

<div class="activeOne activeTwo activeThree"></div>

3,数组与三元运算符结合判断选择需要的class

<div :class="[isActive?'active':'disActive']"></div>
 data() {
    return {
      isActive: false,
    };
  }

结果渲染为:

<div class="disActive"></div>

4,若要绑定多个class,需要逗号隔开就行:(这里的activeTwo加不加引号都可以,也一样都能渲染,如下)

 <div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>

js部分:判断是否绑定对应class

  data() {
    return {
      isActive: true,
      hasError: true
    };
  }

结果渲染为:

<div class="activeOne activeTwo activeThree"></div>

5,绑定的数据对象

<div :class="classObject"></div>
data: {
  classObject: {
    active: true,
  }
}

<div :class="active"></div>

6,绑定一个返回对象的计算属性

<div :class="classObject"></div>
export default {
  data() {
    return {
    isActive: true,
    };
  },
  computed: {
  classObject: function () {
    return {
      active: this.isActive,
    }
  }
}

结果渲染为:

<div class="active"></div>

7,单纯数组方法

<div :class="[activeClass, errorClass]"></div>
 data() {
    return {
      activeClass: "active",
      errorClass: "disActive"
    };
  },

结果渲染为:

<div class="active disActive"></div>