情不知从何起,一往而情深
排名
6
文章
199
粉丝
4
评论
3
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

vue filter,vue 过滤器的使用,vue解析状态,解析审核状态等。vue解析类型。vue表格状态解析,el-tag,element ui 状态

5147人阅读 2022/1/18 11:17 总访问:1110432 评论:0 收藏:0 手机
分类: 前端

使用v-if解析审核状态
代码如下:

  1. <div style="width: 29px;height: 29px;line-height: 29px;text-align: center;">
  2.   <span v-if="litem.labs.doType==1">必做</span>
  3.   <span v-if="litem.labs.doType==2">拓展</span>
  4. </div>

vue表格状态解析
其实一般也是使用v-if来做

  1. <el-table-column prop="doType" label="类型">
  2.   <template slot-scope="scope">
  3.     <p v-if="scope.row.doType==1">必做</p>
  4.     <p v-if="scope.row.doType==2">拓展</p>
  5.   </template>
  6. </el-table-column>

配合el-tag:

  1. <el-table-column prop="period" label="考勤状态" show-overflow-tooltip="">
  2.   <template #default="scope">
  3.     <el-tag v-if="scope.row.attendance_tatus==1" type="success">正常</el-tag>
  4.     <el-tag v-if="scope.row.attendance_tatus==2" type="warning">迟到</el-tag>
  5.     <el-tag v-if="scope.row.attendance_tatus==3" type="warning">早退</el-tag>
  6.   </template>
  7. </el-table-column>





使用vue filter解析审核状态
代码如下:

  1. filters: {
  2.   examineTypeFilterfunction (value{
  3.  if(value==1)
  4. return "审核成功";
  5.  else if(value==2)
  6. return "审核失败";
  7.  else
  8. return "等待审核";
  9.   }
  10. }

使用:

  1. :content="item.isPass|examineTypeFilter"


欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

过滤器的使用细节之多过滤器的使用 4

续写至filter 的使用案例 3篇一、再创建一个过滤器二、在web.xml里配置第二个过滤器三、访问资源注意:过滤器的顺序是按&lt...

Vue.js常用指令事件绑定等Vue过滤器解析状态过滤器多个参数。vue表格状态解析。vue解析类型element ui解析类型状态el-tag

按照html的编码显示:v-html&lt;div class=&quot;font_info&quot; v-html=&quot;item.Content&quot;&gt;{{item.Content}}&l...

layui table使用templet解析状态字段逻辑处理等

比如有这样一个表格:我们想把其中的状态变成具体的文本描述,就可以使用layui table的templet方法1:直接给一个函数即可。...

css弹性盒子flex布局

css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

可输入下拉文本框据输入动态加载数据 jquery-editable-select

用到一个jquery-editable-select的控件github地址:https://github.com/indrimuska/jquery-editable-select这个插件的原理是...

.net mvc分部页.net core分部页

.net分部页的三种方式第一种:@Html.Partial(&quot;_分部页&quot;)第二种:@{ Html.RenderPartial(&quot;分部页&quot;);}...

css中单位pxemrem和vh/vw的理解

&gt;px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字...

让IIS支持webp格式图片让IIS支持vtt格式iis设置mime类型iis配置支持的类型

webp格式图片可以让图片体积变小。也让下载图片变得更加困难一点 在线制作webp工具 https://www.upyun.com/webp?utm_mediu...

网页上传文件断点续传的实现无视文件大小上传以及datatables基本用法

首先明白js是客户带执行代码,c#是服务器上执行代码。本地文件需要用到js处理,服务器端接受c#代码处理1.HTML页面,文件信...

如何使用图标像使用文字一样使用文本图标的方法

1.首先在Iconfont-阿里巴巴矢量图标库上面找到你需要的图标然后加入你的购物车然后选择图标;注意:每个类型的图标会大小不...

使用七牛云的cdn服务提高图片的加载速度

CDN介绍CDN的全称是Content Delivery Network,即内容分发网络。CDN加速主要是加速静态资源,如网站上面上传的图片、媒体,...

通俗易懂什么是.NET?什么是.NET Framework?什么是.NET Core?

朋友圈@蓝羽 看到一篇文章写的太详细太通俗了,搬过来细细看完,保证你对.NET有个新的认识理解原文地址:https://www.cnblo...

JS监听input、keydown有输入法时打字完成后触发事件

在给输入框绑定input或keydown事件时预期效果是有输入法时,输入中文后触发事件,不希望输一个字母就触发一次事件可以用到c...

修改了css后让浏览器从缓存中更新

当我们修改了css后,如果不做一些操作,浏览器是不会自动更新我们的样式文件的。除非是过期或者用户手动刷新清理缓存等。所...