详解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 相关文章推荐
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
Angular工具方法学习
Dec 26 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
JavaScript封装单向链表的示例代码
Sep 17 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 cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
Python实现简单的HttpServer服务器示例
2017/09/25 Python
python实现人脸识别代码
2017/11/08 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
使用Tkinter制作信息提示框
2020/02/18 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
员工自我鉴定
2013/10/09 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
揭牌仪式主持词
2014/03/19 职场文书
委托证明模板
2014/09/16 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android
python Django框架快速入门教程(后台管理)
2021/07/21 Python
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python