vue中class类名根据绑定的值三元表达式或字符串拼接动态添加类名

最新推荐文章于 2024-06-20 10:43:02 发布
最新推荐文章于 2024-06-20 10:43:02 发布
阅读量2.6k 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jack_rose_me/article/details/120957030
版权

vue中class类名根据绑定的值三元表达式或字符串拼接动态添加类名
有2种实现方法：

1、数组方法

<span :class='["gender","bg-muted",data.gender===1 ? "fa-nanxing" : "fa-nvxing"]'></span>

提示：数组中的gender和bg-muted我这里是要加引号的，因为我这里就是字符串，
如果不加引号的，代表的是data中的一项数据。

2、字符串拼接方法

<span :class="'gender '+'bg-muted '+(data.gender===1 ? 'fa-nanxing' : 'fa-nvxing')"></span>

提示：gender和bg-muted后加一个空格（必须有），原理可以看开始位置的class类名格式，就很好理解。

林间风雨
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中使用三元表达式实现类名的切换
weixin_43709908的博客
12-10 2973
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
Vue的Class与Style绑定的方法
08-29
本篇文章主要介绍了Vue的Class与Style绑定的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue动态绑定class的几种方式
最新发布
weixin_55209970的博客
06-20 1063
方法和计算属性在Vue3中都可以用于处理和操作数据，但它们在使用和性能上有一些关键的区别。计算属性是一种具有缓存机制的响应式对象，只有当其依赖的数据发生变化时才会重新计算。而方法没有缓存机制，每次页面更新时都会重新执行，无论数据是否变化。虽然方法和计算属性得到的结果一样 还是要多使用计算属性？
vue中class动态绑定值拼接字符串
南北极之间
10-21 2862
1，es6模板字符串 :class="字符串${index}"
vue中动态绑定class名称
xiaomao_wxj的博客
05-19 1989
Vue项目中动态绑定class类名的各个方法总结
vue class 字符拼接
sam的博客
07-04 6969
var vm = new Vue({ el: '#app', data: { status: 3, } )} <li :class="`curre${status}`"></li>
vue 在class中拼接变量
sepier的博客
06-23 2088
<div v-for="item in contentList[activeIndex]" :key="item.id" :class="'dynamicNewsListDetail indexNews'+(activeIndex)+''" ></div>
vue动态绑定class的几种常用方式小结
10-16
在Vue.js中，动态绑定`class`是一种常见且强大的特性，允许我们根据组件的状态或数据来改变元素的样式。本文将详细讲解Vue中几种常用的动态绑定`class`的方法。 1. **对象方法** - **基础绑定**：最简单的方式是...
class绑定多个值 vue_vue动态绑定:class的几种方式
weixin_39661345的博客
12-24 3664
一、对象语法1、给v-bind:class 设置一个对象，可以动态地切换class，例如：var app = new Vue({el:'#app',data:{isActive:true}})最终渲染结果：2、对象中也可以传入多个属性，来动态切换class。另外，:class可以与普通class共存，例如：var app = new Vue({el:'#app',data:{isActive:tr...
vue下, :class 原有name + 动态拼接参数
qq_41737172的博客
03-17 556
vue下, :class 原有name + 动态拼接参数
vue中如何实现变量和字符串拼接
08-30
主要介绍了vue中如何实现变量和字符串拼接，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中绑定字符串拼接class
有问题可关注公众号：前端研究院 后台输入问题回复
01-08 7101
方式一： :class="`字符串${item.name}`" 示例如下： :class="`core-object${item.name}`" 转载https://blog.csdn.net/qq_35366269/article/details/84644978
VUE3 学习笔记（七）动态样式 class 实现
热门推荐
sensor_WU 博客
04-08 1万+
本文介绍了VUE中动态设置CSS和Style的方法。
vue动态绑定class
Mahuicool的博客
02-28 1983
在vue框架开发中，有时候我们需要对元素的样式进行动态控制，比如tab按钮的切换。我们可以通过vue指令v-bind对元素的class进行动态控制。控制方式有对象和数组两种。
Vue 三元表达式动态添加类名，怎么一次性添加多个？
不知名人士的博客
12-13 1849
这么一个场景，假如 data 中有个 type 属性，只要这个 type 不为空，就给div添加 A、B 两个类名，否则就添加类名 C。该怎么做？ <template> <div :class="[type !== '' ? 'A B' : 'C']">777</div> <!-- 是的，中间用空格隔开就行了 --> </template> <script> import vuedraggable from 'vuedragg
Vue动态绑定Class与Style
长沙火山
03-17 4440
这样可以根据数据的变化来动态改变元素的样式，实现更灵活的样式控制。通过数组语法，可以根据多个条件的组合来决定元素应该添加哪些类，实现更复杂的样式控制。通过数组语法，可以根据多个条件的组合来决定元素应该具有哪些样式，实现更灵活的样式控制。这样，我们可以根据多个条件的组合来动态控制元素的样式，使页面更具交互性和灵活性。数组语法，可以实现更复杂的样式控制，根据多个条件的组合来动态改变元素的样式，满足不同的需求。通过数组语法，可以根据多个条件的组合来动态控制元素的样式，实现更灵活的样式控制。
vue 动态class三元表达式
10-18
好的，回答您的问题：在 Vue 中，可以使用三元表达式来动态绑定 class。例如： ```html <div :class="isActive ? 'active' : ''"></div> ``` 这里的 `isActive` 是一个布尔值，如果为 true，则绑定 `active` 类名，否则不绑定任何类名。 另外，如果需要绑定多个类名，可以使用数组语法： ```html <div :class="[isActive ? 'active' : '', isDisabled ? 'disabled' : '']"></div> ``` 这里的 `isDisabled` 也是一个布尔值，如果为 true，则绑定 `disabled` 类名。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值