v-if和v-else和vue-filter过滤器结合实现的条件判断改变样式的功能

最新推荐文章于 2022-04-01 10:12:27 发布
最新推荐文章于 2022-04-01 10:12:27 发布
阅读量1.8k 收藏 3
点赞数
分类专栏： Vue 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42149538/article/details/107553196
版权

前天做后台管理有一个新需求就是根据条件渲染的数据颜色是不同的，废话少说直接上代码

考点一 v-if和v-else的用法

先说v-if和v-else的用法，在上面代码中v-if 里面的条件满足scope.row.zfNumBl-scope.row.payNumThreshold>0这两个值相减大于0这个条件时，页面上显示的数字就标红，v-else-if里面的条件满足Math.abs(scope.row.zfNumBl-scope.row.payNumThreshold)<0.1||Math.abs(scope.row.payNumThreshold-scope.row.zfNumBl)<0.1这个条件时，页面上显示的文字是橘黄色。

考点二 求绝对值的方法

Math.abs()的方法是取两个数之差的绝对值,

考点三 局部过滤器的使用

 <template slot-scope="scope">

            <span v-if="scope.row.zfMoneyBl-scope.row.payMoneyThreshold>0" style="color:red">{ {scope.row.zfMoneyBl | toPercent}}|{ {scope.row.payMoneyThreshold | toPerc

最低0.47元/天 解锁文章
It届辣妈点点
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue过滤器 v-if v-else的使用
weixin_45265095的博客
07-22 923
vue过滤器 <div id="app"> <input type="text" v-model="name" /> {{name|UpFormatFiter}} <p v-text="name"></p> <input type="text" v-model="date" /> {{date|DateFormatFiter}} <p v-text="date"></p>
vue中filters的使用
qq_40411134的博客
05-29 381
在vue中有的需要根据判断条件展示数据就是要用到filters <template> <div> <div>{{arr|getNumber}}</div> <!-- 得到的就是1 --> </div> </template> <script> export default { data(){ return{ arr=['1','2'] } },
vue过滤器使用 filter
weixin_43023873的博客
09-16 771
1.filter的使用场景，一般为当后端返回数据为判断显示某个内容时，原来通常使用v-if现在改用filter便于管理 1.创建filter文件 import Vue from 'vue'; /*订单页面详情页面,状态栏*/ Vue.filter('settleAccountsType',(val)=>{ if(val==4){ return `订单已取消！` }el...
vue2.0-filter 及 在v-if v-show 中的使用
asd2014916的博客
12-15 622
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
v-if,v-show中如何使用过滤器
Smile_666666的博客
03-31 508
v-if,v-show中如何使用过滤器 需要在methods中写方法classIdshow <div class="beautyNumDetail" v-if="classIdshow(item.classId)"> <span>预存{{item.pay | fiflterPay}}</span> </div> methods: { classIdshow(val) { const show = [0,1,2,3,4,5
Vue.js 实现v-if和v-else来切换CSS样式
怎奈你何的博客
12-25 3173
一、要想使用Vue.js实现v-if和v-else来切换CSS样式，有两种实现方式： 比如我们想给一个div设置两个不同的背景颜色（当status为1的时候，我们设置背景为红色，当status状态为2的时候我们设置背景为蓝色）： .back-red{ /* 红色背景 */ width: 100px; height: 100px; background-color: red; } .back-blue{ /* 蓝色背景 */ width: 100px; height: 100px; ba
vue filters 绑定用法及实现按需显示
weixin_55116366的博客
03-28 476
vue filters 绑定用法
vue基础：渲染&表单数据&过滤器&指令&生命周期
沉迷写代码的程序猿的博客
04-01 1804
文章目录vue基础：渲染&表单数据&过滤器&指令&生命周期一、条件渲染1、v-if2、v-show二、列表渲染1、列表过滤1.1、用watch监视属性实现列表过滤1.2、用computed计算属性实现列表过滤2、列表排序3、监测数据的原理三、收集表单数据四、过滤器五、指令1、内置指令：v-cloak2、内置指令：v-once3、内置指令：v-pre4、自定义指令六、生命周期 vue基础：渲染&表单数据&过滤器&指令&生命周期 一、条件渲染 和
前端Vue获取数据的时候,得到数组,一般都用到的v-if 大于 0
m0_49714202的博客
02-19 2282
v-if="lineData.length > 0"这里特别要注意的是，如果去掉获取图标的时候是另一个样子，所以必须要加 一: v-if = "length > 0"使用目前遇到的两种 1. 第一种情况,是在body里面循环div等元素的时候，给包裹循环div的元素添加v-if,一般的是数组长度 (1)案例 <!-- 这个为获取数组buttonArr --> <el-dropdown @command="updateType" v-if="buttonA
使用v-if判断条件赋值文字并给文字添加颜色
weixin_57988035的博客
11-24 2543
<template> <div class="textResults" v-if="copyRating == '文案质量偏低'" style="color: #91C7AE">{{copyRating}}</div> <div class="textResults" v-else-if="copyRating == '文案质量一般'" style="...
在v-if属性中使用过滤器 filter，报错
ddx2019的博客
07-22 4013
Property or method "filterOperateName" is not defined on the instance but referenced during render. Make sure that this property is reactive <template v-if="operateName | filterOperateName"> <p class="enable_font"> <i cl
如何在vue中优雅地使用v-if判断
铁锤妹妹的博客
07-28 1万+
情况一：做vue项目，有的时候会遇到有几个元素都使用同一个v-if条件。 下面这种方法虽然可以实现，但是整体代码看起来有点笨拙，我们可以用<template>标签进行优化一下。 <template> <div class="card"> <img src="../../assets/image/background frame.png" /> <h3 v-if="expanded">123</h3> &lt
vue 过滤器filter（全面）
记录点滴
07-12 3万+
在官方文档中，是这样说明的：可被用于一些常见的文本格式化，vue中过滤器的作用可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变） 补充： 过滤器分全局过滤器和局部过滤器，下边我着重说下全局过滤器，因为全局过滤器在项目中使用频率非常高！ 局部过滤器： 过滤器可以用在两个地方：双花括号插值 或 v-bind表达式。 eg：先来看看第一个小例子： <div id=...
Vue中filters传参的使用方法
KeepSober_D的博客
06-30 3303
Vue中使用filters传参过滤方法 在开发过程中遇到一个问题，后端接口中返回的数据中有一个类型，为100时显示XXX，200时显示XXX，用的Antd组件，在页面刚刷新的时候就得区分出来，所以用到filters来过滤一下；首先通过antd中a-table里面的scopedSlots属性，在页面中自定义一个插槽，然后通过filters来实现 内容部分 <template> <!-- 列表 --> <a-table :columns="columns"&
vue 筛选功能---filters
qq_42352516的博客
05-25 2067
Vue 前端做筛选功能—filters template: <el-table-column v-if="columnsStatus[10].checked" :sortable="columnsStatus[10].sortable" :prop="columnsStatus[10].column" :label="columnsStatus[10].label" :width="columnsStatus[10].width" show-overflow-tooltip :filte
【Vue】Vue中的条件渲染（v-if、v-else-if、v-else 以及 v-show）的使用（实例详解）
热门推荐
一只洒鹿
06-25 5万+
v-if v-else v-else-if v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truth值的时候被渲染。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.js"></script> </head> &lt
Vue中的v-if和v-else
weixin_50357864的博客
03-27 4万+
一、v-if和v-else v-if判断语句之用，v-else则是和v-if一起出现，当v-if判断为true时，v-else不执行；当v-if判断为false时，v-else才执行。 源码01： <!DOCTYPE > <html> <head> <meta charset="utf-8" /> <title>20210327练习</title> </head> <body> <div
vue3 实现el-table 表格和 el-input 的搜索功能
最新发布
05-31
要实现 `el-table` 表格和 `el-input` 的搜索功能，可以借助 `computed` 计算属性和 `watch` 监听器来实现。 首先，在 `el-table` 中添加一个 `el-input` 组件，用于输入搜索关键字，如下所示： ```html <el-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值