详解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数组常用操作技巧汇总
Nov 17 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
javascript实现移动端轮播图
Dec 09 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 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
php检测url是否存在的方法
2015/04/14 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
一段实时更新的时间代码
2006/07/07 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
vue实现防抖的实例代码
2021/01/11 Vue.js
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
生产厂厂长岗位职责
2013/12/25 职场文书
管道维修工岗位职责
2013/12/27 职场文书
应聘护士求职信
2014/07/21 职场文书
供电工程专业求职信
2014/08/09 职场文书
爬山的活动方案
2014/08/16 职场文书
主要领导对照检查材料
2014/08/26 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
家长意见书
2015/06/04 职场文书