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 element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
vuex的使用步骤
Jan 06 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 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
input file获得文件根目录简单实现
2013/04/26 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python中异常重试的解决方案详解
2017/05/05 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
Python接口自动化测试的实现
2020/08/28 Python
函数指针的定义是什么
2016/08/14 面试题
测绘工程个人的自我评价
2013/11/10 职场文书
后勤岗位职责
2013/11/26 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
2014年手术室工作总结
2014/11/26 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python