Vue filters过滤器的使用方法
网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要为大家详细介绍了Vue filters过滤器的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue filters过滤器使用,供大家参考,具体内容如下
实例
先来看看一段代码理解下
html
<div id="app"> {{message | filters2| filters3(true,priceCount)}} </div>
js
var app = new Vue({ el: "#app", data: { message: 199, priceCount:.8 }, filters:{ filters2:function (arg) { console.log("arg:"+arg) if(arg>100){ return arg-8; }else { return arg; } }, filters3:function (arg_1,arg_2,arg_3) { var result; console.log("arg_1:"+arg_1) console.log("arg_2:"+arg_2) console.log("arg_3:"+arg_3) if(arg_2){ result = arg_1arg_3; console.log("result"+result); return result; }else{ result =arg_1; console.log("result"+result); return result } } } });
控制台日志
helloVue.js:17 arg:199
helloVue.js:26 arg_1:191
helloVue.js:27 arg_2:true
helloVue.js:28 arg_3:0.8
helloVue.js:35 result152.8
先来看看两个过滤器的入参
第一个过滤器filters2的入参是199,是Vue实例中绑定的message
第二个过滤器filters3的入参是191、(第一个过滤器返回的值)false(第二个过滤器的第一个入参)、0.8(第二个过滤器的第二个入参)
1、Vue实例中的message是199
2、第一个过滤器,大于100的数减8(理解为满100减8),199-8=191传给第二个过滤器作为第一个参数
3、第二个过滤器,有两个入参,第一个是boolean值(理解为是否打折),第二个是0.8(折扣)。
当第一个入参为true的时候(表示需要打折),1910.8=152.8(0.8为折扣)
通过过滤器filters我们可以根据业务场景对数据进行处理。
如上一个例子,可以理解成如下业务场景。
1、当商品价格大于100时,可以减8块钱
2、当店铺做活动的时候可以进行打折促销(0.8)
3、展示的数值就是用户需要支付的金额
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程