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操作ACCESS数据库(读增改删)的代码
May 14 Javascript
js跟随滚动条滚动浮动代码
Dec 31 Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
jquery if条件语句的写法
May 19 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 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
PHP语法自动检查的Vim插件
2014/08/11 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
python日志记录模块实例及改进
2017/02/12 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
python实现自动打卡的示例代码
2020/10/10 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
安全教育心得体会
2013/12/29 职场文书
理财学专业自荐书
2014/06/28 职场文书
家庭贫困证明
2014/09/23 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
python中的3种定义类方法
2021/11/27 Python