详解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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
Javascript 构造函数 实例分析
Nov 26 Javascript
JS中confirm,alert,prompt函数区别分析
Jan 17 Javascript
读jQuery之三(构建选择器)
Jun 11 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
js实现简单的随机点名器
Sep 17 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
Terran建筑一览
2020/03/14 星际争霸
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
python实现的各种排序算法代码
2013/03/04 Python
Python迭代器和生成器介绍
2015/03/06 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
Ruby如何实现动态方法调用
2012/11/18 面试题
教师师德承诺书
2014/03/26 职场文书
爱护公共设施的标语
2014/06/24 职场文书
锦旗赠语
2015/06/23 职场文书
获奖感言怎么写
2015/07/31 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python
MySQL 数据库范式化设计理论
2022/04/22 MySQL