详解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判断FCKeditor内容是否为空的两种形式
May 14 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
js布局实现单选按钮控件
Jan 17 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
php实现word转html的方法
2016/01/22 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
javascript preload&amp;lazy load
2010/05/13 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
Node.js事件驱动
2015/06/18 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python实现合并两个排序的链表
2019/03/03 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
怎样声明一个匿名的内部类
2016/06/01 面试题
应届生个人求职信模板
2013/11/26 职场文书
后进生转化工作制度
2014/01/17 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
地球一小时宣传标语
2014/06/24 职场文书
销售员自我评价
2015/03/11 职场文书
离婚律师函范本
2015/05/27 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书