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 相关文章推荐
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
vue-element-admin项目导入和导出的实现
May 21 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出错界面
2006/10/09 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
php实现的生成排列算法示例
2019/07/25 PHP
PHP7修改的函数
2021/03/09 PHP
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
javascript常见用法总结
2014/05/22 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
原生JS实现天气预报
2020/06/16 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
Python获取文件ssdeep值的方法
2014/10/05 Python
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
基于python实现KNN分类算法
2020/04/23 Python
OpenCV 边缘检测
2019/07/10 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
Python timeit模块的使用实践
2020/01/13 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
建筑设计所实习生自我鉴定
2013/09/25 职场文书
自我鉴定范文
2013/11/10 职场文书
请假条怎么写
2014/04/10 职场文书
给老师的感谢信
2015/01/20 职场文书
三孔导游词
2015/02/05 职场文书
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python