详解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 22 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
Vue实现附件上传功能
May 28 Javascript
vuex的使用步骤
Jan 06 Vue.js
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
收音机指标测试方法及仪器
2021/03/01 无线电
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
php 文件上传类代码
2011/08/06 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
PHP模块化安装教程
2016/06/01 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
简单了解python的break、continue、pass
2019/07/08 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
学校岗位设置方案
2014/01/16 职场文书
大学生校园创业计划书
2014/02/08 职场文书
公司业务员岗位职责
2014/03/18 职场文书
助学金感谢信
2015/01/20 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL