zoukankan      html  css  js  c++  java
  • vue动态绑定class的几种方式

    vue动态绑定class的最常用几种方式:

    该文章转载于  https://www.cnblogs.com/lwming/p/10925318.html

     第一种:(最简单的绑定)

    1.绑定单个class

     html部分:

     <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>

    第二种:(绑定的数据对象)

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

    第三种:(绑定一个返回对象的计算属性)

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

    结果渲染为:

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

    第四种:(单纯数组方法)

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

    结果渲染为:

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

    第五种:(数组与三元运算符结合判断选择需要的class)

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

    结果渲染为:

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

    以上

    或者参考vue官方文档 https://cn.vuejs.org/v2/guide/class-and-style.html

  • 相关阅读:
    Python使用print打印时,展示内容不换行
    二进制、八进制、十进制和十六进制的相互转化(图解)
    IDEA 配置背景颜色(豆沙绿)
    Linux下脚本文件第一行的作用
    IDEA 注释模板配置
    IDE 常用配置
    Python 运算符
    Python 基础
    Chrome 浏览器快捷键
    正则表达式
  • 原文地址:https://www.cnblogs.com/mfbzr/p/13878267.html
Copyright © 2011-2022 走看看