详解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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
JQuery跨Iframe选择实现代码
Aug 19 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 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
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
Python自动重试HTTP连接装饰器
2015/04/28 Python
python中assert用法实例分析
2015/04/30 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
python安装twisted的问题解析
2018/08/21 Python
python与字符编码问题
2019/05/24 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
成龙洗发水广告词
2014/03/14 职场文书
创业女性典型材料
2014/05/02 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
关于Vue中的options选项
2022/03/22 Vue.js
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫