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 相关文章推荐
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 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
深入了解php4(2)--重访过去
2006/10/09 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
Jquery实现动态切换图片的方法
2015/05/18 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
Python递归函数定义与用法示例
2017/06/02 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
Python-for循环的内部机制
2020/06/12 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
python中的时区问题
2021/01/14 Python
python实现简单文件读写函数
2021/02/25 Python
DIY手工制作经营店创业计划书
2014/02/01 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
司仪主持词两篇
2014/03/22 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
研究生个人学年总结
2015/02/14 职场文书
营业员岗位职责范本
2015/04/14 职场文书
合作意向书范本
2019/04/17 职场文书
解决MySQL报“too many connections“错误
2022/04/19 MySQL