详解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 相关文章推荐
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
js实现筛选功能
Nov 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
Sony CFR 320 修复改造
2020/03/14 无线电
Ajax PHP分页演示
2007/01/02 PHP
优化PHP代码的53条建议
2008/03/27 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
php中strtotime函数用法详解
2014/11/15 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
老生常谈js数据类型
2017/08/03 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
python装饰器decorator介绍
2014/11/21 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
替换python字典中的key值方法
2018/07/06 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
python绘制随机网络图形示例
2019/11/21 Python
python 制作网站小说下载器
2021/02/20 Python
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
企业消防安全制度
2014/02/02 职场文书
学校卫生检查制度
2014/02/03 职场文书
人力资源职位说明书
2014/07/29 职场文书
房产协议书范本
2014/10/18 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
竞选稿之小学班干部
2019/10/31 职场文书