vue判断实现绑定class

最新推荐文章于 2024-08-01 15:03:43 发布

小福不认命

最新推荐文章于 2024-08-01 15:03:43 发布

阅读量1.3k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_39152918/article/details/131741678

版权

方法一使用 { } 包裹类似 if

:class="{'条件成立':  判断条件}

<a
   class="p-1 pl-2 pr-2  rounded-lg"
   data-toggle="dropdown"
   @click="show()"
   :class="{'redText':textStr == '待处理','blueText':textStr == '处理中','greenText':textStr == '已处理'}"
>

方法二使用 [ ] 包裹类似 if else

:class="[判断条件 ? '条件成立' : '条件不成立']

:class="[activeTab.id === item.id ? 'bb-primary-2 primary' : '', index === 0 ? 'ta-l' : index === 3 ? 'ta-r' : 'ta-c']"

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小福不认命

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
vue判断实现绑定class

方法二使用 [ ] 包裹类似 if else。方法一使用 { } 包裹类似 if。
复制链接

扫一扫

vue动态绑定class常用的方式

Stars_in_rain的博客

11-03

272

1、绑定单个 :class="{ 'active': isActive }" 2、绑定多个 :class="{ 'active': isActive, 'sort': isSort }" 3、绑定数据对象 :class="classObject" data() { return { classObject:{ active: true, sort:false } } } 4、三元运算符进行判断 :class="[isActive?'active':'']" 5、数组对象结合动态判断

vue 动态class类名多个判断

weixin_50919759的博客

12-10

9340

vue 动态class 类名多个判断 <a class="p-1 pl-2 pr-2 rounded-lg" data-toggle="dropdown" @click="show()" :class="{'redText':textStr == '待处理','blueText':textStr == '处理中','greenText':textStr == '已处理'}" > {{ textStr }} <img src="./assets/img-zxtj

1 条评论您还未登录，请先登录后发表或查看评论

vue使用三元表达式动态设置style样式和class

锦瑟年华L的博客

05-08

813

vue使用三元表达式动态设置style样式和class

vue进行判断使用class_vue 动态添加class,三个以上的条件做判断方式

热门推荐

weixin_36419499的博客

01-13

1万+

vue 动态添加class,三个以上的条件做判断方式如果 status为1，样式为redRoom如果 status为2，样式为greenRoom1如果 status为其他，样式为greenRoom2:class="{'redRoom': Number(items.status) === 1, 'greenRoom1': Number(items.status) === 2, greenRoom2:...

详解Vue中nextTick的原理与作用

fengjing81的专栏

07-24

1019

Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。

vue实现电子签名、图片合成、及预览功能

weixin_58572700的博客

07-23

1291

本文介绍了电子签名、图片合成、及预览功能

Vue系列面试题

qq_44186810的博客

07-23

1145

Vue2中采用Object.defineProperty来实现数据响应式，Object.definePropery虽然可以监听到数组的变化，但是由于在性能和体验的性价比上考虑，Vue2放弃了这个特性。1）v-for优先于v-if被解析，从源码中发现，先处理静态节点，在处理once，在处理for，在处理if，代码显示for的优先级比if高，断点调试也证实for优先于if。v-if：是惰性渲染机制，在属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。

Vue 状态管理 & Vue CLI

yolo

07-24

980

1、状态管理 2、集中状态管理 2.1 Vuex 2.1.1 Vuex核心概念 2.1.2 Vuex Store实例 2.1.3 Vuex Getter 2.1.4 Vuex Mutation 2.1.4 Vuex Actions 2.1.4 Vuex Module 2.2 Pinia 2.2.1功能增强 3、Vuex 实现原理 4、Pinia 实现原理 5、CLI 5.1 实现

【分享】前端程序员-技术网站推荐

一位前行者的博客

07-30

877

Vue3中的pinia的使用及组合写法与普通写法的区别

m0_62626838的博客

07-30

210

1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。

VUE3自定义指令防止重复点击多次提交

MadSnail00的博客

07-30

273

vue3连续点击按钮重复提交，vue3自定义指令防止重复提交

Springboot+Websocket+Security+Vue 实现弹幕推送功能

最新发布

Gemini1995的博客

08-01

391

【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。

RN高级interview

流星雨的博客

07-31

413

RN高级interview

我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”

努力做最接地气的编程干货分享，感谢关注

07-29

2267

本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！

linux命令行下使用的浏览器

没刮胡子的程序员专栏

08-01

从命令行浏览网页的原因有很多。命令行工具通常具有丰富的选项和参数，可以根据用户的需求进行调整和配置。这种灵活性使得命令行在自动化和脚本编写方面非常有用。对于系统管理员来说，命令行是管理和配置服务器的首选方式。通过命令行，管理员可以快速执行各种任务，例如安装软件包、配置网络、管理用户和权限等。与图形界面相比，命令行通常更高效，特别是在处理大量的重复性任务时。使用Linux命令行浏览器可以提高工作效率，降低系统资源消耗，提高系统的稳定性。

easyui 点击单元格的时候，获取该行另外一个字段的值

极客栈

07-29

399

通过绑定 DataGrid 的事件，可以轻松地在单击单元格时获取该行的其他字段值。这个方法适用于各种场景，比如在用户点击某个单元格时显示额外的信息、执行特定的操作等。希望这个示例能帮助你更好地理解和应用 EasyUI DataGrid 的事件处理。

angular入门基础教程(四）动态属性与事件

峰会路转的博客

07-29

191

状态的变化导致属性值的变化，这个时候我们就需要用到动态属性，ng中的动态属性用[]包裹即可。

新手vue学习问题汇总（自用）（长期更新）

lapiii的博客

07-28

388

是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。

easyadmin layui js监听返回结果，进行token验证防止连点

weixin_43652106的博客

07-29

283

easyadmin layui js监听返回结果，进行token验证防止连点

vue3动态绑定class判断

07-29

在 Vue 3 中，你可以使用动态绑定的方式判断和绑定 class。你可以通过在模板中使用 `:class` 或 `v-bind:class` 指令来实现。下面是一个示例，演示了如何根据条件动态绑定 class： ```html <template> <div :class="{'active': isActive, 'error': hasError}">  </div> </template> <script> export default { data() { return { isActive: true, hasError: false } } } </script> ``` 在上面的示例中，`isActive` 和 `hasError` 是两个数据属性，它们决定了是否添加对应的 class。如果 `isActive` 为 `true`，则会添加 `active` class；如果 `hasError` 为 `true`，则会添加 `error` class。你也可以在模板中使用三元表达式来根据条件动态绑定 class。例如： ```html <template> <div :class="isActive ? 'active' : 'inactive'">  </div> </template> <script> export default { data() { return { isActive: true } } } </script> ``` 在上面的示例中，如果 `isActive` 为 `true`，则添加 `active` class；否则添加 `inactive` class。希望这个示例能够帮助你理解如何在 Vue 3 中动态绑定 class。如果还有其他问题，请随时提问！