vue过滤器在v2.0版本用法
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版本用法的更多相关文章
- 微信快速开发框架（六）-- 微信快速开发框架（WXPP QuickFramework）V2.0版本上线--源码已更新至github
4月28日,已增加多媒体上传及下载API,对应MediaUploadRequest和MediaGetRequest ------------------------------------------ ...
- ICG_System之全自动代码生成器V2.0版本
大家好! 早在2014年本人就已经利用业余时间开发自己的ICG之代码生成器系统.依靠bootstrap的崛起本人也在不断完善此应用.目的是为了减少开发人员的工作量. 减少不必要的复制粘贴操作,该系统已 ...
- go-wingui 2018 全新 v2.0 版本发布，包含重大更新!
go-wingui 2018 全新 v2.0 版本发布,包含重大更新!使用新版CEF内核Chromium 63.0.3239.109,页面可以使用最新的css3,html5技术.使用delphi7重写 ...
- 示例：自定义WPF底层控件UI库 HeBianGu.General.WpfControlLib V2.0版本
原文:示例:自定义WPF底层控件UI库 HeBianGu.General.WpfControlLib V2.0版本 一.目的:封装了一些控件到自定义的控件库中,方便快速开发 二.实现功能: 基本实现常 ...
- 百度离线地图API开发V2.0版本
全面介绍,请看下列介绍地址,改写目前最新版本的百度V2.0地图,已全面实现离线操作,能到达在线功能的95%以上 http://api.jjszd.com:8081/apituiguang/gistg. ...
- Inno Setup 精灵显示插件 InnoFairy (V2.0 版本)
原文 http://restools.hanzify.org/article.asp?id=111 一个如影随形的小精灵会令到你的安装程序更加人性化. 就是这样一个功能的Inno Setup插件, 希 ...
- v2.0版本小程序开发心得(代码之外)
总结一些代码之外的事情: 做优先该做的事情 分清主次,一天只有24小时,人的精力也是有限的,而且经常性的是,在某个时间爆发性的产生了大量的问题.这些问题集中的产生,需要一个一个的解决,但是人的精力是有 ...
- React-router路由4.0版本用法
第一步:引包两个 命令:cnpm i -S react-router react-router-dom 第二步:用路由管理APP页面 1.创建主路由管理页面,在这里使用了路由嵌套 import Rea ...
- Vue 过滤器与计算属性
过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...
随机推荐
- 查看linux服务器内存信息
查看服务器内存信息 dmidecode|grep -P -A5 "Memory\s+Device"|grep Size [root@localhost home]# dmideco ...
- C#.NET调用WSDL接口及方法
1.首先需要清楚WSDL的引用地址 如:http://XX.XX.4.146:8089/axis/services/getfileno?wsdl 上述地址的构造为 类名getfileno. 2.在.N ...
- 一篇文章读懂开源web引擎Crosswalk-《转载》
前言 Web技术的优势早已被广大应用开发者熟知,比如可与云服务轻松集成,基于响应式UI设计的精美布局,高度的开放性,跨平台能力, 高效的分发与部署等等.伴随着移动互联网的快速发展与HTML5技术的逐步 ...
- MySQL基础 - Navicat及HeidiSQL可视化数据库管理工具
你还在使用终端界面查看数据库吗?是的,用来用去还是觉得命令行好用.....这里先留个位子,改天再介绍下这俩工具的使用,虽然好像觉得没啥需要介绍的.
- Ubuntu 搭建docker registry 私有仓库
一.为什么要搭建 docker 私有仓库 原因有几个: 项目需要,不希望将项目放到 docker hub 上. 环境需求,考虑网络.效率的问题,希望在私有服务器上建立自用的仓库,提高便利性和访问速度. ...
- Apache Kylin安装部署
0x01 Kylin安装环境 Kylin依赖于hadoop大数据平台,安装部署之前确认,大数据平台已经安装Hadoop, HBase, Hive. 1.1 了解kylin的两种二进制包 预打包的二进制 ...
- C#重写ToString
C# 中的每个类或结构都可隐式继承 <xref:System.Object> 类. 因此,C# 中的每个对象都会获取 <xref:System.Object.ToString%2A& ...
- C++之客户消费积分管理系统
之前数据结构课程设计要求做这么一个小程序,现在贴上源码,来和大家进行交流学习,希望大家给出意见和建议 程序以链表为主要数据结构对客户信息进行存储,对身份证号码判断了位数及构成(前十七位为数字,最后一位 ...
- mysql 5.1 下载地址 百度云网盘下载
mysql 百度云下载 链接: https://pan.baidu.com/s/1fPSEcgtDN7aU2oQ_sL08Ww 提取码: 关注公众号[GitHubCN]回复2539获取
- drools7 (一、最简单的例子)
切记!!! 必须使用jdk1.8 工程目录 引入依赖包,pom.xml <?xml version="1.0" encoding="UTF-8"?> ...