详解vue过滤器在v2.0版本用法


Posted in Javascript onJune 01, 2017

1.x写法

<body>
<div id="app">
  {{html|uppercase}}
</div>
<script>
  new Vue({
    el:'#app',
    data:{
      msg:"123",
      html:"abc"
    }
  })
</script>
</body>

但是2.0中已经废弃了过滤器,需要我们自定义

<div id="app">
  {{message|uppercase}}
</div>

//过滤器
Vue.filter('uppercase', function(value) {
 if (!value) { return ''}
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
})

var vm = new Vue({
 el:'#app',
 data: {
  message: 'test'
 }
})

Vue.filter( id, [definition] )

参数:

{string} id
{Function} [definition]

用法:

注册或获取全局过滤器。

// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})
// getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

官方文档参考:

http://cn.vuejs.org/v2/api/#filters

http://cn.vuejs.org/v2/api/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
JS原型链怎么理解
Jun 27 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 #Javascript
js随机生成一个验证码
Jun 01 #Javascript
JS实现简单抖动效果
Jun 01 #Javascript
深入理解vue中的$set
Jun 01 #Javascript
详解angular中的作用域及继承
May 31 #Javascript
Node学习记录之cluster模块
May 31 #Javascript
Express框架之connect-flash详解
May 31 #Javascript
You might like
php字符串函数学习之strstr()
2015/03/27 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
php字符串操作常见问题小结
2016/10/11 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
python 提取文件的小程序
2009/07/29 Python
python多重继承新算法C3介绍
2014/09/28 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
树莓派实现移动拍照
2019/06/22 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
Python过滤序列元素的方法
2020/07/31 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
装修施工安全责任书
2014/07/24 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年教务工作总结
2014/12/03 职场文书
董事长开业致辞
2015/07/29 职场文书
MySQL创建管理RANGE分区
2022/04/13 MySQL
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android