详解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高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
vue动态设置路由权限的主要思路
Jan 13 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
PHP date函数参数详解
2006/11/27 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
php自定义错误处理用法实例
2015/03/20 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
js的表单操作 简单计算器
2011/12/29 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
Python中的闭包详细介绍和实例
2014/11/21 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
python决策树之CART分类回归树详解
2017/12/20 Python
机电一体化自荐信
2013/12/10 职场文书
物业管理计划书
2014/01/10 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers
vue修饰符.capture和.self的区别
2022/04/22 Vue.js
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers