详解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 相关文章推荐
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 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多个版本的分析解释
2011/07/21 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
对python中的logger模块全面讲解
2018/04/28 Python
Python中的Django基本命令实例详解
2018/07/15 Python
python实现串口通信的示例代码
2020/02/10 Python
Python pandas如何向excel添加数据
2020/05/22 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
物理专业本科生自荐信
2014/01/30 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
讲座主持词
2014/03/20 职场文书
2015年党员自评材料
2014/12/17 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
2015年女工委工作总结
2015/07/27 职场文书
golang中的struct操作
2021/11/11 Golang
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers
python使用shell脚本创建kafka连接器
2022/04/29 Python