vue 过滤器根据状态id显示状态值

最新推荐文章于 2023-09-25 16:05:36 发布
最新推荐文章于 2023-09-25 16:05:36 发布
阅读量1k 收藏 2
点赞数
文章标签： vue.js filter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45115895/article/details/111636624
版权 
<span v-if="item.id" >{{item.id | stateFormat(item.id) }}</span>

filters: {
    stateFormat(stateId) {
      if(stateId == 0) return '未处理'
      if(stateId == 1) return '处理中'
      if(stateId == 2) return '已处理'
      if(stateId == 3) return '全部'
      return ;
    }
},
weixin_45115895
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js过滤模板- js 过滤器filter的简单使用：filter筛选
qq_34855128的博客
12-25 1854
js 过滤器filter的简单使用： //以下代码将list中的id=2的列表过滤出去 let list=[{id:1,name:'张三'},{id:2,name:'李四'}]; let list2=list.filter(k => { // var reg = new RegExp(strInput, "i"); // return reg...
Vue过滤器(filter)
Li18770760152的博客
10-23 796
1.部过滤器优先于全局过滤器被调用2.过滤器也可以接收额外参数、多个过滤器也可以串联3.并没有改变原本的数据，是产生新的对应的数据。
vue 过滤器的使用
m0_46693606的博客
04-12 613
例子：过滤出表格中数字对应的支付状态，以及不同支付状态的对应的颜色 一、过滤对应的状态 1.在src目录下新建filters文件夹，新建filter.js filter.js内容如下: export default{ /** * 支付状态 * 1 未支付 * 2 已支付 * 3 已处理 * 4 未处理 */ setPayStatus(status){ switch (status){ ..
Vue数据及事件绑定、filter过滤器
星河梦~的博客
01-11 984
目录Vue数据绑定单向绑定双向绑定值绑定事件绑定事件处理器事件修饰符键值修饰符class与style绑定绑定class绑定内联样式filter过滤器 Vue数据绑定 单向绑定 将Model绑定到View后，当用JavaScript代码更新Model时，View会自动更新。（模型——>视图） 单向绑定的实现过程是： 所有数据只保存一份。 一旦数据变化，就去更新页面（只有data——>DOM，没有DOM——>data） 若用户在页面上做了更新，就手动收集（双向绑定式自动收集），合并到原有的数
vue过滤器filter
SugarXiXixi的博客
11-01 197
过滤器filter 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <!-- :id被绑定的属性 （如style，href 等） rawId data中的值 formatId 过滤器中的值 --> <div v-bind:id="rawId | formatId"></div> 全局过滤
vue根据条件不同显示不同按钮的操作
10-15
补充的知识点是关于 Vue 过滤器（Filters）的使用。过滤器允许我们在数据绑定时对值进行转换。在上述场景中，假设我们需要根据商品的类型（`type`）显示不同的文本描述。如果直接从后端获取的数据中，`type` 字段...
Vuejs入门教程之Vue生命周期，数据，手动挂载，指令，过滤器
10-20
在本文中，我们将深入探讨Vue.js的基础概念，包括Vue实例的生命周期、数据绑定、手动挂载、指令以及过滤器。 1. **Vue实例的生命周期**： Vue实例从创建到销毁的过程称为生命周期。包括`beforeCreate`、`created`...
vue w3cschool学习笔记
09-07
在“vue w3cschool学习笔记”中，我们可以看到多个关键知识点，包括Vue的安装与运行、实例化、模板语法、指令、用户输入、过滤器、条件判断、循环语句、计算属性以及事件处理等。 1. **安装与运行**： 使用`cnpm ...
vue实现购物车列表
10-15
过滤器在Vue中用于对数据进行转换。 5. **事件处理**： - `@click`指令用于监听用户的点击事件，例如`@click="item.num--"`减号按钮减少商品数量，`@click="item.num++"`加号按钮增加数量，`@click="delItem(item....
vue下的@change事件的实现
10-16
当用户在选择省份的下拉框中做出选择时，`getCity`方法会被调用，该方法根据所选省份的ID过滤出对应的子城市，并将结果赋值给`citys`数组。`v-model`属性用于双向数据绑定，确保`provinceId`与选择项的值同步。 ```...
Vue知识整理，让你快速入门Vue.js：03_7.本地应用：v-if指令（条件判断-显示状态-操作dom元素）
鲁迷那的专栏—坚持实践后再写出来！
03-22 1261
目录 一、指令v-if的语法介绍 二、指令 v-if 代码验证测试 1、实例代码 2、效果展示 三、代码演示 v-show 和 v-if 的区别 1、实例代码 2、效果展示 四、内容-总结 上一节我们学习了v-show指令，一个通过操作display来切换元素显示状态的指令，但是在View中我们并不仅仅就这一个指令来操作元素的显示状态，这一节我们将来学习另外一个类似的指令v-if......
如何解决Vue使用filter过滤原始数据，并赋值给后端返回的数据改变了原始数据
weixin_46820017的博客
12-09 3646
一、使用filter进行数据过滤 //已上按钮 hadclass(index){ 　　let res=this.changeList.filter(function(item,index,array){ 　　 return(item.status==1); 　　}); this.leftbtn = true this.showbtn = false this.result[index].list= res; }, 点击已选按钮，筛选过滤状态为1的数据 //未上按钮 noclass(inde
vue 数组对象过滤器
qq_46058838的博客
10-25 1769
vue 数组对象过滤器
vue根据ID（数字、编号）显示对应的文字状态
weixin_44533129的博客
07-27 9262
原来的样式 想要显示的样式 方式一：使用slot-scope+计算属性；（关于计算属性传参，参考的是vue 计算属性传参，并返回处理结果） 方式二：使用slot-scope <template> <el-table :data="TemplateList" highlight-current-row> <el-table-column label="模板类型方式一"> <template slot-scope="scope"&
vue关键字筛选过滤
qq_57623976的博客
12-15 1648
先写个输入框，和要展示的内容， <input type="text" placeholder="输入" v-model="chooseaaa" /> <view v-for="(item,index) in newarry" :key="index"> {{item.name}} </view> 这里的数组newarry是筛选之后呈现的数组 patharry:[{ id:'001',name:'张三',age:'18' },{
es6 树结构过滤对应id的数据
最新发布
qq_35145095的博客
09-25 380
最终返回的结果是一个新的树结构对象，其中只包含符合过滤条件的节点及其子节点的对象。函数递归遍历树，并返回一个新的过滤后的树结构，其中只包含指定 ID 的节点及其子节点。以上代码输出的结果会是一个包含符合过滤条件的节点的新树结构。函数递归遍历树，并返回一个新的过滤后的树结构，其中只包含指定ID的节点及其子节点。函数递归遍历树，并返回一个新的过滤后的树结构，其中只包含指定 ID 的节点及其子节点的对象数据。函数递归遍历树，并返回一个新的过滤后的树结构数组，其中只包含指定 ID 的节点及其子节点的对象。
vue 过滤器(filter)的使用
qq_36437172的博客
08-10 696
| 符号前面是过滤器的传参，后面是过滤器的返回值。 使用方式： <!-- 在双花括号中 --> <div>{{ message | formatDate }}</div> <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatDate"></div> 很多时候，后...
根据不同的状态值，展示不同的字段
weixin_51937505的博客
04-13 1371
先看一下要实现的效果 view代码 <view v-for="(item,index) in list" :key="index"> <view :style="{color:getColor(item.type)}"> {{getBetRel(item.type)}} </view> </view> js // new Map() const metaType = { '0': '等待吃饭', '1': '不
vue根据传的状态显示按钮
09-05
接下来，在模板中使用按钮，并使用`v-if`或`v-show`指令来根据状态值来显示或隐藏按钮。在`v-if`或`v-show`指令的表达式中，可以使用定义的状态值。 示例代码如下： ```html 显示按钮 <!-- 或者使用 v-show -...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值