对象方法

  • 最简单的绑定
    :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. koa 基础(二十五)数据库 与 art-template 模板 联动 --- 新增数据

    1.视图层 根目录/views/index.html <!DOCTYPE html> <html lang="en"> <head> <m ...

  2. Note 2 for <Pratical Programming : An Introduction to Computer Science Using Python 3>

    Book Imformation : <Pratical Programming : An Introduction to Computer Science Using Python 3> ...

  3. RequestsLibrary接口测试

    RequestsLibrary常用的关键字 关  键  字 描   述 Create Session 创建HTTP会话 Get Request 采用get方式请求 Post Request 采用Pos ...

  4. 发布Rest风格的WebService的SpringBoot极简例子

    JDK:1.8.0_212 IDE:STS4(Spring Tool Suit4 Version: 4.3.2.RELEASE) 工程下载:https://files.cnblogs.com/file ...

  5. openerp学习笔记 计划动作、计划执行(维护计划)

    示例代码: data/scheduler.xml <?xml version="1.0" encoding="utf-8"?><openerp ...

  6. Linux的组成

    1.内核:是系统的心脏,是运行程序和管理像磁盘和打印机等硬件设备的核心程序. 2.Shell:是系统的用户界面,提供了用户和内核进行交互操作的一种接口.它接收用户输入的命令并把它送入内核去执行,是一个 ...

  7. 依赖注入框架之androidannotations

    主页: http://androidannotations.org/ 用途: 1. 使用依赖注入Views,extras,System Service,resources 2. 简化线程模型 3. 事 ...

  8. c#阿里云短信验证码

    发送验证码 private static void SendAcs(string mobile, string templateCode, dynamic json, int ourid) { if ...

  9. IDEA离线更新

    因为在hosts文件添加以下dns添加 0.0.0.0 account.jetbrains.com 0.0.0.0 www.jetbrains.com 导致IDEA自动更新失败.手工下载回更新文件IU ...

  10. JavaScript高程第三版笔记(1-5章)

    第2章:在html中使用javascript ①script标签的defer属性 <script type="text/javascript" defer="def ...