Vue的过滤器你真了解吗


Posted in Vue.js onFebruary 24, 2022

1. 过滤器

案例中使用到时间格式相关API

1.1 对过滤器的理解

定义:对要显示的数据进行特定格式化后在显示

适用:做一些简单的逻辑处理

特点:滤器可以做一些简单操作,并且没有改变原来的数据,产生新的对应的数据

​ 1. 语法 : data | 过滤器

​ 不传参数默认将data值传入,并且自动调用函数,函数可接收到value

​ 传参数并不会覆盖掉第一个参数,第一个参数默认是value,第二个参数才是 传入的参数

​ 2. 滤器可以以串联的形式

​ data | 过滤器 | 过滤器

​ 执行的顺序是将data当做参数传入到第一个过滤器中,第一个过滤器处理完,返回的

​ 值作为第二个过滤器的参数

1.2 全局过滤器:

Vue.filter(filterName, function(value){
  return value.slice(0, 4);
})
new Vue({
	.
	..
	...
})

1.3 局部过滤器:

new Vue{
	filters:{
		filterName(value){
      return value.slice(0, 4);
		}
	}
}

在html中使用过滤器

<div>{{ handledata | filtername }}</div>
<div>{{ handledata | filtername(参数) }}</div>

1.4 过滤器的案例

<div id="root">
        <h3>methods写的:{{time()}}</h3>
        <h3>computed写的:{{time1}}</h3>
        <h3>过滤器的写的:{{number | ftime("YYYY-MM-DD HH:mm:ss") | qjtime}}</h3>
    </div>
    <div id="root2">
        <hr>
        <h3>{{name | qjtime}}</h3>
    </div>
    <script>
        Vue.config.productionTip = false
        // 全局过滤器
        Vue.filter('qjtime', function (val) {
            return val.slice(0, 4)
        })
        let vm = new Vue({
            el: '#root',
            data: {
                number: Date.now()
            },
            methods: {
                time() {
                    return dayjs(this.number).format("YYYY年MM月DD日 HH:mm:ss")
                }
            },
            computed:
            {
                time1: {
                    get() {
                        return dayjs(this.number).format("YYYY年MM月DD日 HH:mm:ss")
                    }
                }
            },
            // 局部过滤器
            filters:
            {
                // 这是ES的语法表示如果有传参数就使用传进来的参数,如果没有传参就使用
                ftime(val, str = "YYYY年MM月DD日 HH:mm:ss") {
                    return dayjs(val).format(str)
                },
            }
        })

        new Vue({
            el: "#root2",
            data: {
                number: Date.now(),
                name: '我是第二个Vue'
            }
        })
    </script>

总结

以上就是今天要讲的内容,本文介绍了对过滤器的一些相关知识,希望对大家有所帮助!

Vue.js 相关文章推荐
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
Vue监视数据的原理详解
Feb 24 #Vue.js
Vue的列表之渲染,排序,过滤详解
Vue3如何理解ref toRef和toRefs的区别
Feb 18 #Vue.js
Vue h函数的使用详解
Feb 18 #Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 #Vue.js
前端vue+express实现文件的上传下载示例
一篇文章告诉你如何实现Vue前端分页和后端分页
You might like
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
一段实时更新的时间代码
2006/07/07 Javascript
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
python数字图像处理之高级滤波代码详解
2017/11/23 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
KTV的创业计划书范文
2014/02/02 职场文书
迎新晚会主持词
2014/03/24 职场文书
计算机系本科生求职信
2014/05/31 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫
python标准库ElementTree处理xml
2022/05/20 Python