vue 1.x 的写法在  vue 2.x版本已经废除

vue 1.x 写法

 <body>

 <div id="app">

     {{message | capitalize | ...}}

 </div>

 <script>

     new Vue({

         el:'#app',

         data:{

             
             message:"message"

         }

     })

 </script>

 </body>


上面代码输出："Message"(首字母大写)

vue 2.x 写法 （需要自己自定义）

     <div id="app">

         {{message | capitalize}}

     </div>

     //注册全局过滤器

     Vue.filter('capitalize', function(value) {

         if (!value) { return ''}

         value = value.toString()

         //返回处理后的值

         return value.charAt(0).toUpperCase() + value.slice(1)

     })

     var vm = new Vue({

         el:'#app',

         data: {

         　　message: 'message'

     　　}
18    　}）

 关于 filter 在 vue2.x 遇到的一些问题： 

 // 注册

 Vue.filter('my-filter', function (value) {

   // 返回处理后的值

 })

 // getter，返回已注册的过滤器

 var myFilter = Vue.filter('my-filter')

 Vue.filter( id, [definition] )

 参数：

     {string} id

     {Function} [definition]

1.function里第一个参数value默认为使用这个过滤器的data对象内的值,第一个参数必须为自身的值，后面可以加任意多的参数。数序颠倒就会出错。

2.在vue2.0里 管道符‘ | '只能用在 mousetache(插值) 和 v-bind 中。

3.“ | ”能将上一个过滤器输出内容作为下一个过滤器的输入内容。（<div>{{ content | reverseStr | removeNum }}</div>）

4.在vue2.0里 过滤器只能用类似函数的写法reverseString( ‘I must tell you:')，括号内是参数，不同于vue1.0的用空格后加参数的写法；

vue过滤器在v2.0版本用法的更多相关文章

  1. 微信快速开发框架（六）-- 微信快速开发框架（WXPP QuickFramework）V2.0版本上线--源码已更新至github

    4月28日,已增加多媒体上传及下载API,对应MediaUploadRequest和MediaGetRequest ------------------------------------------ ...

  2. ICG_System之全自动代码生成器V2.0版本

    大家好! 早在2014年本人就已经利用业余时间开发自己的ICG之代码生成器系统.依靠bootstrap的崛起本人也在不断完善此应用.目的是为了减少开发人员的工作量. 减少不必要的复制粘贴操作,该系统已 ...

  3. go-wingui 2018 全新 v2.0 版本发布，包含重大更新!

    go-wingui 2018 全新 v2.0 版本发布,包含重大更新!使用新版CEF内核Chromium 63.0.3239.109,页面可以使用最新的css3,html5技术.使用delphi7重写 ...

  4. 示例：自定义WPF底层控件UI库 HeBianGu.General.WpfControlLib V2.0版本

    原文:示例:自定义WPF底层控件UI库 HeBianGu.General.WpfControlLib V2.0版本 一.目的:封装了一些控件到自定义的控件库中,方便快速开发 二.实现功能: 基本实现常 ...

  5. 百度离线地图API开发V2.0版本

    全面介绍,请看下列介绍地址,改写目前最新版本的百度V2.0地图,已全面实现离线操作,能到达在线功能的95%以上 http://api.jjszd.com:8081/apituiguang/gistg. ...

  6. Inno Setup 精灵显示插件 InnoFairy (V2.0 版本)

    原文 http://restools.hanzify.org/article.asp?id=111 一个如影随形的小精灵会令到你的安装程序更加人性化. 就是这样一个功能的Inno Setup插件, 希 ...

  7. v2.0版本小程序开发心得(代码之外)

    总结一些代码之外的事情: 做优先该做的事情 分清主次,一天只有24小时,人的精力也是有限的,而且经常性的是,在某个时间爆发性的产生了大量的问题.这些问题集中的产生,需要一个一个的解决,但是人的精力是有 ...

  8. React-router路由4.0版本用法

    第一步:引包两个 命令:cnpm i -S react-router react-router-dom 第二步:用路由管理APP页面 1.创建主路由管理页面,在这里使用了路由嵌套 import Rea ...

  9. Vue 过滤器与计算属性

    过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...

随机推荐

  1. 使用ubifs格式的根文件系统

    配置内核,使其支持ubifs文件系统 1)Device Drivers  --->Memory Technology Device (MTD) support  --->UBI - Uns ...

  2. Javascript中的Callback方法浅析

    什么是callback?  回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数 ...

  3. c语言格式控制符

    http://zhidao.baidu.com/link?url=-YJjz3U0fd_eSW9eLa8ankGo_QbyOOOaKYWyAY9g4mKWQj0DN6l12OSLJz24U8jCwo1 ...

  4. js点击页面其他地方如何隐藏div元素菜单

    web页面常用的一个需求,写下拉菜单是我们往往不是用select_option,而是自定义一个元素列出选项来满足需求,当我们点击按钮出现菜单, 点击按钮或菜单以外页面空白地方隐藏该菜单,这里提供一种简 ...

  5. nginx php mysql日志配置

    1.编辑mysql的配置文件my.cnf,这个文件通常在/etc目录下,但我用rpm装mysql的时候这个配置文件是在/usr目录下,但我测试过,无论是放在/etc目录下,还是放在     /usr目 ...

  6. 关于卫星RNSS与RDSS

    名词解释:RNSS与RDSS 服务于用户位置确定的卫星无线电业务有两种.一种是卫星无线电导航业务,英文全称Radio Navigation Satellite System,缩写RNSS,由用户接收卫 ...

  7. Java字符串拼接效率对比

    1.来自:http://blog.csdn.net/Zen99T/article/details/51255418 2.来自:http://blog.csdn.net/kimsoft/article/ ...

  8. HDU 1054 Strategic Game（最小路径覆盖）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1054 题目大意:给你一棵树,选取树上最少的节点使得可以覆盖整棵树. 解题思路: 首先树肯定是二分图,因 ...

  9. 超简单的java爬虫

    最简单的爬虫,不需要设定代理服务器,不需要设定cookie,不需要http连接池,使用httpget方法,只是为了获取html代码... 好吧,满足这个要求的爬虫应该是最基本的爬虫了.当然这也是做复杂 ...

  10. BFC 从了解到放弃

    最近工作中我突然产生了一个想法,就如我们人类面临的终极问题一般,我从哪里来?我到哪里去?在撸代码进行CSS布局的时候,我会去想,我为什么这么做?,为什么浮动的元素要用overflow?,为什么要用cl ...