详解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 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
JavaScript更改class和id的方法
Oct 10 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 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中抽象类和接口的概念以及区别
2013/06/27 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
探讨js中的双感叹号判断
2013/11/11 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
js css自定义分页效果
2017/02/24 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
vue-for循环嵌套操作示例
2019/01/28 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
js实现弹窗效果
2020/08/09 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
基于python历史天气采集的分析
2019/02/14 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
python解释器安装教程的方法步骤
2020/07/02 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
怎样比较两个类型为String的字符串
2016/08/17 面试题
武汉东之林科技有限公司机试
2013/09/17 面试题
安全检查验收制度
2014/01/12 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
重点工程汇报材料
2014/08/27 职场文书
酒店员工辞职信范文
2015/02/28 职场文书