vue动态绑定class的几种方式

vue动态绑定class的几种方式对象方法 最简单的绑定 这里的 active 加不加单引号都可以 以下也一样都能渲染 class active isActive 判断是否绑定一个 active class active isActive 1 或者 class active isActive index 绑定并判断多个第一种 用

: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']" 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/198587.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月26日 下午2:52
下一篇 2026年3月26日 下午2:52


相关推荐

  • Java开发手册之并发处理

    Java开发手册之并发处理Java开发手册之并发处理

    2022年4月22日
    47
  • 怎么查看webpack版本_webpack项目目录结构

    怎么查看webpack版本_webpack项目目录结构1.在项目的package.json文件,里面的scripts脚本命令中添加:“webpack”:“webpack–version””scripts”:{“webpack”:”webpack–version”},然后在启动项目时用npmrunwebpack

    2022年8月10日
    11
  • linux获取root权限命令_linux最高权限获取命令

    linux获取root权限命令_linux最高权限获取命令Linux上一切皆文件,不管什么程序,读取文件就能获取一个UUID.Linux内核提供有UUID生成接口:cat/proc/sys/kernel/random/uuid  获取系统uuiddmidecode-ssystem-uuid|tr’A-Z”a-z’  转载于:https://www.cnblogs.com/navysummer/…

    2022年8月10日
    10
  • Ubuntu下cuda卸载

    Ubuntu下cuda卸载由于需要安装cuda8.0,,所以需要卸载cuda7.5. 在/usr/local/cuda/bin 目录下,有cuda 自带的卸载工具uninstall_cuda_7.5.plcd/usr/local/cuda/binsudo./uninstall_cuda_7.5.pl剩下步骤步骤如下:1.安装显卡驱动[cpp] viewplain copysudo apt-get update…

    2025年9月18日
    10
  • 关于component-scan中base-package包含通配符的问题探究

    关于component-scan中base-package包含通配符的问题探究今天在配置Spring的component-scan时,发现了一个有趣的问题。就是在指定base-package时,如果使用了星号通配符*,有时会出现类扫描不到的情况。下面研究一下这个问题。先介绍一下项目结构: 为了演示,我在java文件夹下创建名为controller的包,并在该包下创建了一个名为IndexController的类。如图所示: 先来看正常情况: 在Spring配置…

    2022年6月13日
    90
  • c++中 override用法

    c++中 override用法描述 override 保留字表示当前函数重写了基类的虚函数 目的 1 在函数比较多的情况下可以提示读者某个函数重写了基类虚函数 表示这个虚函数是从基类继承 不是派生类自己定义的 2 强制编译器检查某个函数是否重写基类虚函数 如果没有则报错 用法 在类的成员函数参数列表后面添加该关键字既可 例子 classBase virtualvoidf classDeriv

    2026年3月16日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号