【小河今学 | Vue】Vue中如何动态添加class的问题

最新推荐文章于 2023-12-10 22:24:19 发布
最新推荐文章于 2023-12-10 22:24:19 发布
阅读量335 收藏
点赞数
分类专栏： 小河今学 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LB_laber/article/details/127236434
版权

记录一个Vue动态添加class时遇到的问题
今天写项目遇到问题如下
需要在下面div中根据后面这个v-show的true false 动态绑定一个animate动画类名

<div class="sort" v-show="show">

一开始的做法写成对象报错了，换成数组后，即以下代码

<div :class="[sort,show ? 'animate__animated animate__pulse' : '']" v-show="show">

发现原本绑定的sort的样式不见了。
询问大佬后发现原来是要给sort加上引号，问题就解决了。

LB_laber
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3.x 动态创建组件
天天的博客
12-11 5078
import {createApp, onUnmounted} from "vue" import MinDialg from "../views/minDialog.vue" const createMinDialog=()=>{ var app = createApp(MinDialg,{ isshow:true }) var divEle = document.createElement("div") // 让我们节点挂在到一个dom元素上 ..
在vue中动态添加class类进行显示隐藏实例
12-30
如下所示： <div class=status_button> <el type=success click=checkSite>查岗</el> <el type=danger>视频</el> </div> <!-- 查岗部分显示影藏 --> <div class=check_button class=[this.flag?> <ul class=cl> <li>用xinhic</li>
Vue 动态添加class可能带来的问题（被覆盖）
weixin_45143856的博客
11-24 2193
Vue 动态添加class可能带来的问题（被覆盖）
Vue绑定对象中的对象时报错不存在，“TypeError: Cannot read properties of undefined (reading...
最新发布
Hamburg520的博客
12-10 1247
触发情景：原先我在请求接口拿到数组后，通过匹配值将某一下标的内容赋值给data里的doctor对象，但是由于我给doctor初始为{}，而在页面代码中我想用到doctor.dot.avatar,发现一直报错，此处我在想，明明我请求接口拿到的数据，dot里的avatar是有值的，为什么会一直报错？
vue 面试题 之 class 动态显示
yz18931904的博客
05-29 416
对象方法 -最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染） :class="{ 'active': isActive }" 判断是否绑定一个active :class="{'active':isActive==-1}" 或者 :class="{'active':isActive==index}" 绑定并判断多个 第一种（用逗号隔开） :class="{ 'active': isActive, 'sort': isSort }" 第二种（放在d...
vue中实现div可编辑，并插入指定元素，样式
weixin_44727080的博客
07-02 5390
vue中实现一个既可以编辑内容，有可以动态编辑内容插入一个带有样式的内容，改变默认内容后，这个样式消失的效果，这里来整理下调研与解决实现问题之路。
vue中动态添加class类名的方法
10-18
今天小编就为大家分享一篇vue中动态添加class类名的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 动态添加class,三个以上的条件做判断方式
01-22
如果 status为1，样式为redRoom 如果 status为2，样式为greenRoom1 ...补充知识：vue 根据变量值来判断显示class 我就废话不多说了，大家还是直接看代码吧~ <div :class=”[‘bottom-btn’,{‘face-btn’:type==’
Vue3的动态组件与keepalive组件
weixin_45940866的博客
02-27 339
动态组件 <component>常用于组件间来回切换的场景，比如说Tab。具体使用方式如下: <component :is='组件名/组件对象'> <template>    <div>        <button         &nbsp
vue的动态创建div
weixin_43704734的博客
06-28 4759
2.下面是赋值
Vue3使用h函数和render函数动态插入组件和元素
qq_44314045的博客
01-05 5534
Vue3使用h函数和render函数动态插入组件和元素
vue 动态添加div
baidu_23263735的博客
03-18 7803
<div v-for="(item,index) in editSchProps" :key="index" > <el-form-item :label="item.code+'编码'" prop="code" :rules="userRules"> <el-input v-model="item.code" :maxlength="10...
【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果
看花容易绣花难
09-19 1734
【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果
vue项目用原生js动态创建的div的样式不起作用该怎么办？
丑小鸭变黑天鹅的博客
12-06 3192
vue项目用原生js动态创建的div的样式不起作用该怎么办一、问题描述二、问题解决 一、问题描述 最近做项目遇到这样一个奇怪的问题，用了高德地图的自定义窗体，但是发现样式无论如何都不起作用。网上查了些资料才得以解决 先看一下不起作用的代码 可以看到样式和动态创建的div都没问题，但是样式就是不起作用，如下图 二、问题解决 通过查看控制台可以看到样式起作用的div都有这样一个特征 都有data-v-xxxxxx这样类似的 再看看我们自己写的渲染出来是什么样的 可以发现并没有上面的特征，所以我就猜想是
vue动态绑定class的几种方法
热门推荐
u013994400的博客
06-23 8万+
vue动态绑定class的几种做法
vue修改路由切换时的class名称，并添加切换动画
u012758488的博客
06-11 1009
<!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-UA-Compatible" content="ie=edge"> <title>Do.
Vue动态绑定class
qq_44998582的博客
01-07 2万+
我们在学习js时有学到过如何去动态切换元素的样式，具体有以下步骤： 先获得元素 修改样式。通过className或者style修改 <head> <style> .class1 { border: 1px solid black; height: 20px; width: 20px; } </style> </head> <body> <div id...
在Vue和uniapp中:class绑定不显示
我心坚持
03-22 899
重新获取按钮的背景刚开始是灰色的，:class绑定的应该是蓝色；是优先级的问题，
Web前端小课堂3——通过Vue实现动态类，通过Vue动态控制样式，事件处理
m0_56294528的博客
06-22 827
通过Vue实现动态类，通过Vue动态控制样式，事件处理
vue中动态添加class类名
06-06
在Vue中动态添加class类名，可以使用以下方式： 1. 使用对象语法：可以在模板中使用v-bind:class指令，将一个对象传递给它，以动态地切换class。 ``` <div v-bind:class="{ active: isActive }"> ``` 在上面的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值