对象方法

  • 最简单的绑定
    :class="{ 'active': isActive }"
  • 判断是否绑定一个active

    :class="{'active':isActive==-1}"
    或者
    :class="{'active':isActive==index}"
  • 绑定并判断多个

    第一种(用逗号隔开)
    :class="{ 'active': isActive, 'sort': isSort }" 第二种(放在data里面) //也可以把后面绑定的对象写在一个变量放在data里面,可以变成下面这样
    :class="classObject"
    data() {
    return {
    classObject:{ active: true, sort:false }
    }
    } 第三种(使用computed属性)
    :class="classObject"
    data() {
    return {
    isActive: true,
    isSort: false
    }
    },
    computed: {
    classObject: function () {
    return {
    active: this.isActive,
    sort:this.isSort
    }
    }
    }

数组方法

  • 单纯数组

    :class="[isActive,isSort]"
    data() {
    return{
    isActive:'active',
    isSort:'sort'
    }
    }
  • 数组与三元运算符结合判断选择需要的class
  • 注意:三元运算符后面的“:”两边的class需要加上单引号,否则不能正确渲染
    :class="[isActive?'active':'']"
    或者
    :class="[isActive==1?'active':'']"
    或者
    :class="[isActive==index?'active':'']"
    或者
    :class="[isActive==index?'active':'otherActiveClass']"
  • 数组对象结合动态判断

    //前面这个active在对象里面可以不加单引号,后面这个sort要加单引号
    :class="[{ active: isActive }, 'sort']"
    或者
    :class="[{ active: isActive==1 }, 'sort']"
    或者
    :class="[{ active: isActive==index }, 'sort']"

Vue之动态class写法总结的更多相关文章

  1. vue中动态class写法

    <div class="wrap" :class="{active:index==current}"></div> <div cl ...

  2. vue + element 动态渲染、移除表单并添加验证

    博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...

  3. 周记4——vue中动态添加图片无效、build上线后background-image路径问题

    又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...

  4. Vue中通过Vue.extend动态创建实例

    Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...

  5. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  6. vue中动态引入图片为什么要是require, 你不知道的那些事

    相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...

  7. Vue 中动态添加class(使用v-bind:class)

    今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...

  8. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

  9. vue 高度 动态更新计算 calcHeight watch $route

    vue 高度 动态更新计算 calcHeight () { // this.tableHeight = window.innerHeight - 210 } }, mounted () { // co ...

随机推荐

  1. LC 644. Maximum Average Subarray II 【lock,hard】

    Given an array consisting of n integers, find the contiguous subarray whose length is greater than o ...

  2. LVS负载均衡(LVS简介、三种工作模式、十种调度算法)

    一.LVS简介 LVS(Linux Virtual Server)即Linux虚拟服务器,是由章文嵩博士主导的开源负载均衡项目,目前LVS已经被集成到Linux内核模块中.该项目在Linux内核中实现 ...

  3. MongoDB数据节点基础操作

    1.查看集群中各节点的状态: rs0:PRIMARY> rs.status() 2.查看集群中各节点配置情况: rs0:PRIMARY> rs.conf() 3.主节点降级为从节点: rs ...

  4. 在使用DapperExtensions时遇到"其他信息: ConnectionString 属性尚未初始化。"错误

    今天在使用在使用DapperExtensions时遇到"其他信息: ConnectionString 属性尚未初始化."错误. //return conn.GetList<T ...

  5. Python基础知识(程序结构)

    流程控制语句 选择语句.条件表达式.循环语句.跳转语句.pass空语句 程序结构三种基本结构 顺序结构.选择结构.循环结构 顺序结构 按照代码顺序依次运行 选择结构 根据条件表达式结果选择执行不同的语 ...

  6. jmeter设置中文语言

    1.在jmeter的bin目录下找到  jmeter.properties  文件并打开 2.搜索关键字 “language”,将37行(以搜索到的位置为准)改成下图所示:language=zh_CN ...

  7. [转载]Jupyter Notebook 的快捷键

    原文:http://blog.csdn.net/lawme/article/details/51034543 Jupyter Notebook 的快捷键 Jupyter Notebook 有两种键盘输 ...

  8. 【Python开发】python重命名文件和遍历文件夹操作

    当前文件夹下,把所有文件名中的"50076"替换成"50092",用Python实现,代码所下: # encoding: utf-8 import os imp ...

  9. apache 设置允许跨域

    1.首先找到 httpd.conf 文件 找到   #LoadModule headers_module modules/mod_headers.so 把#注释符去掉(也有可能已经默认去掉了) 目的是 ...

  10. 2019牛客暑期多校训练营(第一场)-E(DP)

    题目链接:https://ac.nowcoder.com/acm/contest/881/E 题意:求可分解成n个AB和m个BA的字符串的个数. 思路: 首先根据贪心思想,前n个A可作为AB的A,后m ...