详解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 相关文章推荐
ejs v9 javascript模板系统
Mar 21 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
js实现新年倒计时效果
Dec 10 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
JS如何把字符串转换成json
Feb 21 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
js实现右键菜单功能
2016/11/28 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
python简单实现获取当前时间
2016/08/27 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
python实现停车管理系统
2018/11/30 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
新学期开学寄语
2014/01/18 职场文书
双语教学实施方案
2014/03/23 职场文书
银行内勤岗位职责
2014/04/09 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
学校党员干部承诺书
2015/05/04 职场文书