请教,vue文对比显示不同样式的问题?

最新推荐文章于 2024-04-28 18:50:28 发布
最新推荐文章于 2024-04-28 18:50:28 发布
阅读量696 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuji0517/article/details/106467755
版权

我后台传的是map, map里有两个list，list放在table里遍历的。
我想在前台对比list的字段，如果相同文字就没变化，如果文字不同就显示样式。样式就文字颜色不同就行。
想问下前台这块该怎么写呢？vue不是很熟

写两个class名称就行了，判断list字段动态修改class名称就行了，怎么动态修改class百度都有，或者动态修改style也可以，实在不行在获取数据的时候直接处理好，将class的名称修改，然后渲染出来的dom就是改变好的字体颜色

谢谢回复，那么怎么对比呢  ？我的两个list数据放在两个table里的

谢谢回复！但是还是有些问题。因为table是单独封装的，怎么获取它的值呢？

你刚把请求后台拿到数据的时候就可以进行处理，或者你截个图看一下，资源代下载

其实有个更方便的处理方式，你返回的不是map吗，后台判断好，增加一个标识就行了，前端直接拿着这个标识判断显示对应的样式，我觉得这样是很方便的

明白了  多谢多谢！

最简单：后台判断好给flag
简单：返回值之后js做判断给flag
复杂：2个v-for里面用v-if判断再设置

liuji0517
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue: scoped 样式与 CSS Module 对比
Joy_Yue的博客
11-17 867
每个通过 vue-cli 创建的 Vue.js 应用都内置了两个很好的解决方案：Scoped CSS 和 CSS Modules (模块式 CSS)。两种方案各有优缺点，我们来看下哪种方案在你的案例中更适用。 Scoped 样式 我们只需要在 style 标签上添加一个 scoped 属性即可启用 scoped 样式： 这样就会使得我们的样式只被应用到这个组件中的元素上。这是借助 PostC...
一.vue在单双行显示不同的样式
ivylingling123的博客
12-10 2766
解决思路 1.vue在遍历列表时怎么区分是单行还是双行，通过查阅资料vue的v_for in遍历的时候有一个index下标从1开始,通过下标能被2整除的就是双行 2.vue怎么改变元素的样式，通过:class改变元素的class属性或者通过v-bind:style改变便签的style属性 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran...
Vue3+ts 前端封装代码/文本对比diff弹窗组件
最新发布
weixin_61901451的博客
04-28 570
vue3 json代码及字符串 v-code-diff对比插件。man.ts中全局引入v-code-diff。
vue二种方式根据条件判断显示不同样式
weixin_41949878的博客
04-28 4944
实现效果，当item为0时，字体颜色显示蓝色，否则显示橙色 1.v-if-v-else/v-show的方式，只显示其中之一 #v-if v-else <divclass="blue"v-if="item.num=='0'">{{item.num}}</div> <divclass="orange"v-else>{{item.num}}</div> #v-show <divclass="blue"v-show="it...
vue对比两段json文本修改,修改的项添加红色高亮显示
weixin_50061893的博客
11-08 3595
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录需求一、实现思路二、实现步骤1.数据格式2.代码部分3.html渲染部分代码4.完成结果总结 需求 用户需求是记录项目各项操作的日志,并且显示给用户,并且把有修改的值给用户高亮显示,如图所示 一、实现思路 因为返回的json的字段的属性是固定的,可以通过逐个比较更新前,后的转义后json串,如果某个属性的值不相同,就给该属性的值加上color样式 然后通过v-html渲染. 二、实现步骤 1.数据格式 更新后的数据 更新前的老数
vue+elementui 中js两个不同的数组做对比，找出不同的项放入新数组。
weixin_46409887的博客
02-23 1318
vue+elementui 中js两个不同的数组做对比，找出不同的项放入新数组。
vue根据条件不同显示不同按钮的操作
10-15
在 Vue 中，我们经常需要根据不同的条件来展示不同的元素，比如按钮。本篇文章将详细介绍如何在 Vue 中根据条件动态地显示或隐藏按钮。 首先，让我们看看标题中提到的具体操作。在 Vue 模板中，我们可以使用 `v-if`...
kendoui for vue全面解决中文显示问题.zip
04-15
为了全面解决KendoUI for Vue的中文显示问题，我们需要关注以下几个关键点： 1. **语言包导入**：KendoUI通常会提供不同语言的资源包，包括中文语言包。你需要找到对应的中文语言文件（例如`kendo.all.min.js`或`...
Vue实现点击显示不同图片的效果
10-16
主要为大家详细介绍了Vue实现点击显示不同图片的效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现差异文本高亮展示（jsdiff实现变更前后对比）
编程小将
10-29 5641
最近做企业信用管理模块，需要展示企业信息变更内容，达到对比效果。 选用diff库：https://github.com/kpdecker/jsdiff 效果图 变更前 变更后
vue 自定义 el-cascader 展示文字及样式
且听风吟的博客
07-04 5525
vue 自定义 el-cascader 展示文字及样式
vue 两个数组数据对比
qq_34724739的博客
01-05 3160
vue 两个数据对比数据
(vue)将文本和关键字做对比类似词性标注
nyf_unknow的博客
08-02 605
(vue)将文本和关键字做对比类似词性标注
Vue —— 9、过滤得到两个数组不相同的元素
weixin_54966486的博客
05-01 1296
//计算属性 computed:{ //计算出还没选择的销售属性 unSelectSaleAttr() { //整个平台就三个属性：saleAttrList[尺寸、颜色、版本] //当前编辑的 Spu 拥有的属于自己的属性 spu.spuSaleAttrList --- 三种中的某几种 //用数组的过滤方法，筛选出该spu中没有的 let result = this.saleAttrList.filter((item)=>{ .
vue 如何对两个文本比较
weixin_43826136的博客
12-25 4157
最开始使用的vue-code-dff插件 有坑 直接导致页面卡死 所以改用下面得插件 1、首先安装插件 npm installcodemirror、diff-match-patch 2、二话不说 直接键个vue 文件 上代码 <template> <div class="compareClass"> <!-- 代码版本，差异对比 对话框内容 --> <div id="view" style="margi...
【两个数组比较值是否一致】简单方法实现vue对比两个数组的值是否一致
seeeeeeeeeee的博客
05-25 5670
今天写到了一个试题的考试功能，我需要通过把用户填的答案数组和正确答案数组比较，看看用户选中的答案是否和正确答案完全一致，比如正确答案是1,2那用户选中的答案可以是2，1这样顺序乱的 但是不能是2，3也不能是2,1,3。这都是错误的，只有选中的项和正确答案一致不多不少，并没每一位都是对的上的才能通过。那就需要两个数组比较，这里通过every方法来简单写一个数组比较功能 //模拟两个数组，顺序是乱的 let a = [1, 2, 3]; let b = [2, 1, 3].
vue-quill-editor踩坑记录--富文本内容回显样式不对
weixin_43794749的博客
03-10 4622
使用vue-quill-editor写的富文本，内容在H5使用v-html显示时，样式跟在富文本写的时候样式不一样，字体大小显示不出来。 原因：有些类名，在v-html页面是没有找到的。 解决: 全局或者局部引入vue-quill-editor的样式文件 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' <div v-html="co.
vue富文本编辑器中样式冲突和不能修改的问题
qq_37622750的博客
12-21 2752
在vue项目中，富文本回显通常采用的是v-html指令来渲染html字符串。但是在回显的过程中，发现了一些问题，以此记录下来。 1.富文本（tinyMec）在编辑的时候采用的是iframe隔离，这样的话富文本中编辑的样式就是浏览器原生的样式。但是回显的时候，就会遇到项目中的全局样式所覆盖，导致所见不是所得。 解决： 通过 @import 将浏览器默认样式文件导入到v-html的页面中，并添加scoped 2.通过上一步操作，发现虽然v-html中的内容显示正常了，但是其它页面的样式也出现问题了。 查阅
Vue v-for对数据的遍历
小小前端攻城狮的博客
03-23 1819
场景 当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。 v-for的语法类似于JavaScript中的for循环。 格式：v-for = “item in items” 数组数据 情况1: 不需要使用索引值 格式：``v-for=" item in items " 依次从items 中取出item，并且在元素的内容中，我们可以使用Mustache语法(插值{{item}})，来使用item <!-- 1.在遍历的过程中，没有使用索引值（下标值）--> &lt
Vue3和Vue2对比，我们如何选用？
07-11
Vue 3 和 Vue 2 在很多方面有所不同，下面是一些主要的对比和考虑因素： 1. 性能：Vue 3 在性能方面有显著的改进，包括更快的渲染速度和更小的包大小。如果你对性能有更高的要求，可以考虑选择 Vue 3。 2. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值