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属性 的相关文章

  • 黑马程序员jvm笔记(四)--字节码部分心得

    10 字节码部分 这部分 主要介绍了类的字节码文件 以及从更深层的角度去理解类是怎么被加载的 jvm的内存结构 10 1 字节码文件的分析 1 获得字节码文件 得到如下的字节码文件 0000000 ca fe ba be 00 00 00

随机推荐

  • 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