16.Class绑定

Class绑定

image-20220824170942769

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表,因为 class 是 attribute,我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且易出错的。因此,Vue 专门为 classv-bind 用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是对象或数组

绑定对象

<template><div :class="{ active: isActive,'text-danger': hasError }">isActive</div>
</template>
<script>
export default {data(){return{isActive:true,hasError:true}}
}
</script>

多个对象绑定

<template><div :class="classObject">isActive</div>
</template>
<script>
export default {data() {return {classObject: {active: true,'text-danger': true}}}
}
</script>

绑定数组

<template><div :class="[activeClass,errorClass]">isActive</div>
</template>
<script>
export default {data() {return {activeClass: 'active',errorClass: 'text-danger'}}
}
</script>

如果你也想在数组中有条件地渲染某个 class,你可以使用三元表达式:

<template><div :class="[isActive ? 'active' : '']">isActive</div>
</template>
<script>
export default {data() {return {isActive:true}}
}
</script>

数组和对象

<template><div :class="[{ 'active':isActive }, errorClass]"></div>
</template>
<script>
export default {data() {return {isActive:true,errorClass:"text-danger"}}
}
</script>

温馨提示

isActive:true,
errorClass:“text-danger”
}
}
}


> **温馨提示**
>
> 数组和对象嵌套过程中,只能是数组嵌套对象,不能反其道而行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/636090.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

stl_set

文章目录 set1.关联式容器2.键值对3. set3.1 set介绍3.2 set的使用3.2.1 pair3.2.2 find3.2.3 lower_bound 3.3 multiset3.3.1 multiset的介绍3.3.2 multiset的使用3.3.3 find3.3.4 equal_range3.3.5 erase set 1.关联式容器 在初阶阶段&#xff0c;我们已经接触过STL中的部分…

polkit服务启动失败

使用systemctl 命令报错 Authorization not available. Check if polkit service is running or see debug message for more information. 查看polkit状态是失败的状态&#xff0c;报缺少libstdc.so.6 systemctl status polkit 需要安装libstdc.so.6库 先加载所有安装包 …

MyBatis 框架学习(II)

MyBatis 框架学习(II) 文章目录 MyBatis 框架学习(II)1. 介绍2. 准备&测试2.1 配置数据库连接字符串和MyBatis2.2 编写持久层代码 3. MyBatis XML基础操作3.1 Insert 操作3.2 Delete 操作3.3 Update 操作3.4 Select 操作 4. #{} 与 ${}的使用5. 动态SQL操作5.1 < if >…

【漏洞复现】云时空社会化商业ERP fileupload/gpy存在任意文件上传漏洞

漏洞描述 云时空社会化商业ERP fileupload/gpy存在任意文件上传漏洞 免责声明 技术文章仅供参考,任何个人和组织使用网络应当遵守宪法法律,遵守公共秩序,尊重社会公德,不得利用网络从事危害国家安全、荣誉和利益,未经授权请勿利用文章中的技术资料对任何计算机系统进行…

JS学习归纳8

这是JS基础学习的最后一部分&#xff0c;我们介绍一下简单数据类型和复杂数据类型。 一、 简单数据类型和复杂数据类型 如果有个变量我们以后打算存储为对象&#xff0c;暂时没想好放啥&#xff0c; 这个时候就给 null 1. 简单数据类型 是存放在栈里面 里面直接开辟一个空间存…

ESP32_IDF前端命令开发全过程

ESP32 IDF前端命令开发全过程 开端1. 创建新工程(create-project)2. 创建新组件(create--component)目前文件结构 3. 设置目标芯片4. 配置项目5. 编译工程6. 烧录程序7. 打开监视器8. 一次性编译烧录并打开监视器9. 擦除设备flash10. 查询内存剩余11. 清除编译文件 仅供本人查阅…

Ribbon 添加快速访问区域

添加快速访问区域挺简单的&#xff0c;实例如下所示&#xff1a; void QtRightFuncDemo::createQuickAccessBar() { RibbonQuickAccessBar* quickAccessBar ribbonBar()->quickAccessBar(); QAction* action quickAccessBar->actionCustomizeButton(); act…

编译一个基于debian/ubuntu,centos,arhlinux第三方系统

目录 前言 准备工作 下载linux源码进行编译 linux源码下载 网站 问题 解决办法 编译 可能会遇到的问题 chroot下载debian环境 进入虚拟环境 把chroot的根目录文件打包为.gz文件 编译init文件&#xff08;用于系统启动时的一系列引导&#xff09; 给予文件夹权限 …

本地环境搭建

右键点击Anaconda 安装包&#xff0c;选择 以管理员身份运行 Anaconda 安装包 选择 Install for all Users 根据自己的情况选择安装路径&#xff0c; 点击 next 之前&#xff0c;复制安装路径 第三项可不选&#xff0c;点击 Install 进行安装 整个安装过程大约费时 10min &am…

SpringBoot 3.x + Swagger3 踩坑实录

问题描述 维护的SpringBoot版本是3.0版本&#xff0c;翻教程的时候发现很多SpringBoot2.x版本用的都是springfox&#xff0c;但问题是在SpringBoot3.x版本后&#xff0c;逐渐不支持springfox&#xff0c;强行启动会导致异常&#xff0c;现阶段使用的Springdoc进行替换。 参考…

ruoyi element-ui 实现拖拉调整图片顺序

ruoyi element-ui 实现拖拉调整图片顺序 安装sortablejs https://sortablejs.com/npm 安装sortablejs npm install sortablejs --save相关options var sortable new Sortable(el, {group: "name", // or { name: "...", pull: [true, false, clone, …

论文笔记:Large Language Model for Participatory Urban Planning

202402 arxiv 大模型城市规划 引入了一个基于LLM的多代理协作框架&#xff0c;模拟规划师和数千名具有不同特征和背景的居民&#xff0c;用于参与式城市规划——>生成考虑居民多样化需求的城市区域土地利用规划为了提高讨论的效率&#xff0c;论文采用了鱼缸讨论机制&#…