1.使用地方:
双花括号插值处或  组件属性处
 
例:
{{ message | capitalize }}
<div v-bind:id="rawId | formatId"></div>
 
2.分为两种定义方式:
(1)全局定义
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})
 
new Vue({
  // ...
})
 
例2:过滤性别。0返回男,1返回女
<div>{{source|gender}}</div>
 
Vue.filter('gender', function (value) { //value是要准备过滤的原值
   return value === 0 ? '男' : '女'
})
 
const vm = new Vue({
     el:"#root",
     data:{
        source:0
    }
})
(2)局部定义
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
 
例2:
const vm = new Vue({
     el:"#root",
     data:{
        source:0
    },
     filter:{
         gender(value){
               return value === 0 ? '男' : '女'
         }
     }
})
 
<div>{{source|gender|surfix}}</div>
 
例3:连续过滤    过滤完性别之后,再在结果上加“人”
 
const vm = new Vue({
     el:"#root",
     data:{
        source:0
    },
     filter:{
         gender(value){
               return value === 0 ? '男' : '女'
         },
         surfix (value) {
               return value + '人'
         },
     }
})
 
<div>{{source|gender}}</div>
 
例4:购物车里价格返回两位小数
 
const vm = new Vue({
     el:"#root",
     data:{
        source:0,
        price:123.4567
    },
     fixed (value) {
        return value.toFixed(2)          //toFixed把 Number 四舍五入为指定小数位数的数字。
       }
     },
})
 
<div>{{price|fixed}}</div>       //123.45
 
例5:传参
const vm = new Vue({
     el:"#root",
     data:{
        source:0,
        price:123.4567
    },
     fixed (value,segment) {
        return value.toFixed(segment)          //toFixed把 Number 四舍五入为指定小数位数的数字。
       }
     },
})
 
<div>{{price|fixed(segment)}}</div>       //123.45
 
3.可以对一个值进行连续过滤
{{ message | filterA('arg1', arg2) }}
 
4.可以传多个参数
{{ message | filterA('arg1', arg2) }}
 
这里 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。
 
*计算属性完全可以取代过滤器,但有时使用过滤器比较方便。
 
 
 
 
 
 
 

vue的过滤器语发及应用案例的更多相关文章

  1. Vue自定义过滤器

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...

  2. vue filter过滤器简单应用

    vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...

  3. vue filters过滤器

    vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...

  4. vue的过滤器

    Vue.Js 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果 vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...

  5. vue自定义过滤器的创建和使用

    1.简单介绍   过滤器的作用:实现数据的筛选.过滤.格式化.   过滤器的本质是一个有参数,有返回值的方法.   过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...

  6. VUE:过滤器及日期格式化moment库

    VUE:过滤器及日期格式化moment库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  7. VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符

    过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...

  8. 六、vue基础--过滤器定义

    七.过滤器定义 1.使用:{{username|strip}}.<a :href="url|strip">百度</a> 2.定义:都是定义一个函数,这个函数 ...

  9. vue 时间过滤器

    过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...

随机推荐

  1. Root(hdu5777+扩展欧几里得+原根)2015 Multi-University Training Contest 7

    Root Time Limit: 30000/15000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total Su ...

  2. 继承、接口、static、abstract

    继承: 1.用extends来完成继承 2.子类可以继承父类全部的数据域但是只有部分的数据域对子类可见 3.在java中支持单继承 4.单继承和多继承的比较 (1)多继承比单继承能够更好的提高代码的复 ...

  3. webpack4 系列教程(十四):Clean Plugin and Watch Mode

    作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十四):Clean Plugin and Watch Mode>原文地址.更欢迎 ...

  4. 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

    译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...

  5. 你所不知道的JSON.stringify

    译者按: 老司机们,你知道JSON.stringify还有第二个和第三个可选参数吗?它们是什么呢? 原文: What you didn’t know about JSON.Stringify 译者: ...

  6. JavaScript机器学习之KNN算法

    译者按: 机器学习原来很简单啊,不妨动手试试! 原文: Machine Learning with JavaScript : Part 2 译者: Fundebug 为了保证可读性,本文采用意译而非直 ...

  7. ASP.NET MVC 使用Jquery异步操作JS代码

    $(function () { var ajaxFormSubmit = function () { var $form = $(this); var options = { url: $form.a ...

  8. margin:0 auto是什么意思

    一.margin设置对象外边距 二.margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right 因为0 auto

  9. 洛谷P3246 [HNOI2016]序列(离线 差分 树状数组)

    题意 题目链接 Sol 好像搞出了一个和题解不一样的做法(然而我考场上没写出来还是爆零0) 一个很显然的思路是考虑每个最小值的贡献. 预处理出每个数左边第一个比他小的数,右边第一个比他大的数. 那么\ ...

  10. 【Wyn Enterprise BI知识库】 认识多维数据建模与分析 ZT

    与业务系统类似,商业智能的基础是数据.但是,因为关注的重点不同,业务系统的数据使用方式和商业智能系统有较大差别.本文主要介绍的就是如何理解商业智能所需的多维数据模型和多维数据分析. 数据立方体 多维数 ...