• vue动态绑定class的几种方式


    开发项目中:vue动态绑定class的几种方式~

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

    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><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>
  • 相关阅读:
    一条select语句的执行流程
    理解数据库的事物,ACID,cap
    java并发volatile和sychnorized的底层机制
    避免死锁的几种方式
    如何减少线程上下文切换
    RestTemplate设置超时时间
    spring事务隔离级别和传播级别
    mysql数据库与其他数据库的区别
    spingcloud组件注解汇总
    python二级选择题易错知识点总结
  • 原文地址:https://www.cnblogs.com/mahmud/p/16846775.html
Copyright © 2020-2023  润新知