vue动态绑定class属性

2023-10-30

vue动态绑定class的方式:

  1. 第一种:对象的方式,:class = {iscolor : boo}
    (第一个参数iscolor为类名,第二个参数boo是一个变量,类型为一个boolean值)
<div :class="{color:scope.row.state == null || 
					scope.row.state.toLowerCase() === 'error'}">
						{{scope.row.state}}
</div> 

data(){
return {
		iscolor : true
	}
}

.color {
  color: #ea5151e8;
}

渲染后的

<div  class = "color"></div>
  1. 第二种,数组的方式,class = [iscolor ? “color” : “nocolor”]
    (三木运算符的形式,iscolor 为变量,color 和 nocolor为类名,类名必须加引号)
<div :color = iscolor ></div>

data(){
return {
		iscolor : true
	}
}

.color {
  color: #ea5151;
}
.nocolor {
  color: #3333e8;
}

渲染后的

<div class = "color"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue动态绑定class属性 的相关文章

  • git上传大文件

    注意 免费版的 Gitee 不支持 LFS 需要企业版账户 下载一个git lfs 插件 官网 https git lfs github com 安装路径一定要注意 你的本地 Git 目录下的 bin 以我为例 D Porgram IT G
  • STM8S105K4T6硬件IIC调试小结

    1 IIC初始化 具体时钟设置参考此篇文章 https blog csdn net u014397533 article details 46495905 void I2C Init void I2C CR1 0x00 禁止I2C外设 此句
  • Synchronized锁对象详解

    synchronized 是我们的同步的一种选择 加锁就要有对应的钥匙 这个钥匙分为 当前类对象 当前class对象 第三方对象 synchronized 可以修饰 变量 方法 我们以方法举例可以有如下的几种情况 修饰静态方法 这里默认的锁
  • 保研之路——上交大电子系直博

    上交大电子系直博 个人情况 高校复试参与情况 上交电子系直博 6 15 结语 嗯 抱着不白花这么多路费住宿费的初衷准备写一个保研经验贴 希望学弟学妹少花点钱吧orz 我的战术大概是只要学校给我发了邀请我就去 除了时间冲突的情况 事实证明 我
  • tcpdump: Couldn‘t find user ‘tcpdump‘问题解决

    直接vi etc passwd 加入以下一行 tcpdump x 72 72 sbin nologin 就可以了
  • LocalDate、LocalTime、LocalDateTime介绍

    一 Date与LocalDate LocalTime LocalDateTime互转 1 Date转LocalDate LocalTime LocalDateTime Date date new Date Instant instant d
  • 英雄联盟-经验砖块

    作为一个LOL老玩家 如果说对游戏细节把握不到位 这是说不过去的 我们时常说道发育为重 那么发育包括等级和装备 我们是不是应该更精细的把我等级呢 今天我们来探究一下 赖线从小兵身上我们能获得多少经验等级 问题1 每个小兵有多少经验值呢 近战
  • 关于工作效率的心得分享

    关于工作效率的心得分享 作者 许诗淇 高级视觉设计师 负责过QQ视觉主设工作 目前主导RTX项目设计 个人站点 这是去年11月底在小组里分享过的工作效率心得 在这里也跟大家分享一下工作 快 感哈哈 我相信大家应该都有过工作效率的些许烦恼 而
  • 保研之路——复旦计算机学院预推免

    复旦计算机学院预推免 个人情况 高校复试参与情况 复旦计算机学院直硕 9 19 9 20 结语 嗯 抱着不白花这么多路费住宿费的初衷准备写一个保研经验贴 希望学弟学妹少花点钱吧orz 我的战术大概是只要学校给我发了邀请我就去 除了时间冲突的
  • Vue用户进行页面切换(路由跳转)时,动态改变路由的动画(transition效果)

    当我们在使用Vue Router时 为了用户有更好的视觉效果及体验 我们通常需要实现基于路由的动态过渡效果 github https github com Rise Devin FullStack Product Transport Use
  • QT创建右键快捷菜单

    0 目标 在Qcommbobox右键出来菜单 点击BCC校验 自动算出校验值填入编辑框 1 UI界面选择Action editor 新建action 记住对象名 actionBCC 右键action 点击转到槽 选择triggered 点击
  • 企业DevOps:实施过程中需要关注的各项要点

    作者 亚马逊云科技企业市场战略总监 Stephen Orban 经验并非凭空创造 而是依靠点滴积累所实现 阿尔贝 加缪 在此次的企业DevOps探索之旅系列文章当中 我将带大家一同探讨企业在具备一定DevOps经验之后又该如何处理下一步可能
  • 什么叫恋爱经验,谈过恋爱和没谈过恋爱到底有什么不同呢?

    谈过恋爱 后我撒谎的水平明显提高了 而且越来越能把握女孩的心bai态了 十岁以前 就不说了 无非是淘气和不懂事 十一岁的时候 开始对女孩有好感 但是那时候他离女孩远远的 并且以讨厌女孩 自居 生怕被同伴嘲笑 十二岁的时候 听到大人们说某某男
  • CSS中常用的属性.htm

  • C#企业微信 接收事件服务器(添加外部联系人事件)#openapi回调地址请求不通过# 完整源代码

    设置接收事件服务器 openapi回调地址请求不通过 企业微信api 添加外部联系人事件 using System Web UI WebControls using System IO using System Text using Sys
  • git submodule拉取子模块最新代码

    转载请注明出处 https blog csdn net hhhhhhhhhhkkkkkkkkkk article details 122698629 之前由于对git子模块操作不熟悉 碰到子模块更新代码了本地死活拉取不到最新代码的问题 在网
  • 亚马逊云aws12个月免费服务器搭建小结 (

    转载自 http blog sina com cn s blog 53a30a3b0101hdx9 html 本文小结了在亚马逊aws Amazon Web Services 云计算服务上注册一个免费的服务器的方法和一些注意事项 郑重申明
  • 模拟实现通讯录<二>(动态模拟)

    继静态模拟通讯录 实现动态模拟 静态模拟通讯录博客链接 http blog csdn net bitboss article details 51374654 实现一个通讯录 通讯录可以动态存储信息 每个人的信息包括 姓名 性别 年龄 电话
  • 我的百度经验目录

    百度经验目录 进一步了解基于Mathematica的图像特征检测方法 http jingyan baidu com article a501d80c44a372ec630f5eb4 html 怎么把python代码打包成exe文件 http
  • word下划线空格不延长&对齐

    空格下划线不延长 文件 选项 常规与保存 勾选 为尾部空格添加下划线 确定 下划线对齐 首行 把第一行的下划线调到满意位置 按tab键 下面的行 删到比首行短一丢丢 按tab键

随机推荐

  • MySQL(十)—线上MySQL锁超时了怎么办?update操作怎么上了个表锁啊?

    文章目录 一 异常错误 二 尽量还原这个错误 1 准备数据 2 阐述业务 3 分析原因 三 线上如何解决这个异常呢 1 设置锁超时时间 2 使用online ddl方式建立唯一索引 3 动态增加服务节点 一 异常错误 先上一个出现异常的截图
  • STC89C51——定时器/计数器介绍及程序配置

    前言 本文介绍基于常见的51单片机 即如下图的芯片 AT89C51具备2个定时器 计数器 即定时器 计数器 0 定时器 计数器 1 简称 T0 T1 T0 有 4 种工作方式 T1 有 3 种工作方式 2个定时器前3种工作方式一样 但是在T
  • IS-IS协议 HCIP

    我需要 最狂的风 和最静的海 HCIP IS IS协议基本原理 场景应用 历史起源 路由计算过程 地址结构 路由器分类 邻居HELLO报文 邻居关系建立 DIS及DIS与DR的类比 链路状态信息的载体 链路状态信息的交互 路由算法 网络分层
  • IO和NIO的区别

    在这里不再过多描述IO的具体API用法 总的来说reader writer是处理字符的 而inputsream 和 outputstream是处理字节的 eg 图片什么的 其实现在大多Web应用上传图片时候也不会使用字节流而是上传一个图片存
  • elasticsearch中节点都启动但是无法形成集群问题

    近日 单台机器 8个节点的es集群 8个节点都正常started了 但是就是无法形成集群 后来看日志 日志中出现一堆的MasterNotDiscoveredException这种异常 完整日志如下 2016 04 27 15 08 22 4
  • 关于STM32软件IIC与PCF8563通信 逻辑分析仪0xA2 Missing Ack /NAK排查与解决

    最近在使用PCF8563时 准备用STM32 软件IIC通信时 改了软件IIC后 将所有函数都做了适配 但是 发现PCF正常初始化 程序无法运行 链接上逻辑分析仪后发现是一直收不到ACK 发送的A2 地址和0x08都正常 程序正常时先设置时
  • 暴力解决八皇后问题

    如题 翻到了一个以前的代码 发现是刚学c时帮同学解决八皇后问题的代码文件 足足两百行 放出来纪念一下当初傻傻的自己吧哈哈 话不多说 放代码 include
  • arm linux kernel编译问题总结

    1 make menuconfig报错 guang guang kylin Develop linux stable make menuconfig HOSTCC scripts basic fixdep Unable to find th
  • 【记录】服务器搬家记录

    服务器搬家记录 前言 零 备份数据 程序 一 备份mysql 1 先删掉无用的表和库 减小数据包大小 2 备份到本地 二 备份docker 1 提交 2 标签 3 push 4 保存挂载宿主机上的文件 三 备份定时脚本 四 开发环境 服务器
  • 完美解决:由于找不到mfc140u.dll,无法继续执行代码。

    什么是msvcp140u dll msvcp140 dll是Microsoft Visual C Redistributable的一个组件 它包含了许多用于C 编程的函数和类 如果你的系统缺少了这个文件 那么你可能会遇到 找不到msvcp1
  • js 用变量做对象key值的写法

    变量为name 对象为obj var name name var obj obj key var name jack var obj name 1 name 2 name aaa 3 console log obj name 1 jack
  • Dart中List的常用方法概述及使用案例

    在Dart中 List是一种有序的集合 它提供了许多有用的方法来操作列表数据 Flutter使用Dart语言开发 所以在Flutter中依然适用 下面是List常用的方法概述及使用案例 length属性 List的length属性返回Lis
  • pandas的时间对象

    pandas时间处理对象 pandas中有个时间库 datautil 可以使用其中的方法把多种字符串时间格式转化为时间对象 import dateutil import pandas as pd a dateutil parser pars
  • git还原到某个版本

    1 tortoisegit还原 v2还原到v1 1 1 强制还原 git reset 如果使用这种方式还原到v1 将丢失还原到v1到v2之间的所有提交及日志 1 1 1 显示日志 有save1 save2两条提交记录 1 1 2 重置版本
  • Git的理解与使用

    文章目录 一 初识Git 1 1 分布式管理系统 1 2 Git的安装与配置 二 Git理论 2 1 四个工作区域 2 2 提交代码的简易流程 2 3 Git所管理文件的四种状态 三 Git命令 3 1 基础命令 git init git
  • hash函数应用(整理)

    评估hash函数优劣的基准主要有以下两个指标 1 散列分布性 即桶的使用率backet usage 已使用桶数 总的桶数 这个比例越高 说明分布性良好 是好的hash设计 2 平均桶长 即avg backet len 所有已使用桶的平均长度
  • iTween基础之Rotate(旋转角度)

    一 基础介绍 二 基础属性 原文地址 http blog csdn net dingkun520wy article details 50696489 一 基础介绍 RotateTo 旋转游戏
  • Java判断字符串是否为数字(正负、小数)

    需求 传来一个String类型的参数 需要判断该参数是否为数字 正负 正数 小数都要能判断 吗 如果是小数则保留2位小数 开始采用Character isDigit 方法来判断一个字符串是否为数字 只能判断全是数字的字符串 不能判断小数 负
  • Anaconda创建虚拟环境+Pycharm使用Anaconda创建的虚拟环境

    首先需要下载anaconda然后在搜索栏中搜索Anaconda Prompt anaconda 点击进入 进入到envs目录然后输入以下命令 conda create n to pack python 3 7 创建一个名为 to pack且
  • vue动态绑定class属性

    vue动态绑定class的方式 第一种 对象的方式 class iscolor boo 第一个参数iscolor为类名 第二个参数boo是一个变量 类型为一个boolean值 div scope row state div data ret