Vue filters过滤器的使用方法


Posted in Javascript onJuly 14, 2017

本文实例为大家分享了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_1*arg_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的时候(表示需要打折),191*0.8=152.8(0.8为折扣)

总结

通过过滤器filters我们可以根据业务场景对数据进行处理。

如上一个例子,可以理解成如下业务场景。

1、当商品价格大于100时,可以减8块钱
2、当店铺做活动的时候可以进行打折促销(0.8)
3、最后展示的数值就是用户需要支付的金额

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
简单的JS轮播图代码
Jul 18 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
微信小程序实现人脸识别
May 25 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
npm全局环境变量配置详解
Dec 15 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 #Javascript
Vue computed计算属性的使用方法
Jul 14 #Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 #Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 #Javascript
Javascript中Promise的四种常用方法总结
Jul 14 #Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 #Javascript
详解VUE中v-bind的基本用法
Jul 13 #Javascript
You might like
ajax缓存问题解决途径
2006/12/06 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
python实现求最长回文子串长度
2018/01/22 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
用Python解决x的n次方问题
2019/02/08 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
Python实现图片添加文字
2019/11/26 Python
python3实现绘制二维点图
2019/12/04 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
党风廉政承诺书
2014/03/27 职场文书
法学院毕业生求职信
2014/06/25 职场文书
作风年建设汇报材料
2014/08/14 职场文书
优秀大学生自荐信
2015/03/26 职场文书
nginx lua 操作 mysql
2022/05/15 Servers