详解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 相关文章推荐
判断一个变量是数组Array类型的方法
Sep 16 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
理解JavaScript事件对象
Jan 25 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
小程序如何写动态标签的实现方法
Feb 05 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
我的论坛源代码(九)
2006/10/09 PHP
非常好的php目录导航文件代码
2006/10/09 PHP
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
外贸业务员求职信范文
2013/12/12 职场文书
大学学风建设方案
2014/05/04 职场文书
承诺书样本
2014/08/30 职场文书
夫妻吵架保证书
2015/05/08 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书