美文网首页
vue如何自定义过滤器

vue如何自定义过滤器

作者: 微笑是我_f8bb | 来源:发表于2019-07-09 12:05 被阅读0次

一、什么是过滤器?
过滤器是在数据渲染时,根据使用的过滤器来渲染数据,过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本。
二、过滤器怎样使用?
渲染时使用 “| 过滤器名称”。eg: v-for=”val in arr | filterBy ‘a’ 取包含’a’的数据
三、常用过滤器介绍
1、debounce ------配合事件,延迟执行
eg: @keyup=”functionname | debounce 2000 ”
2、limitBy 配合数据,限制几条数据
eg:v-for=”val in arr | limityBy 2 1” 从下标为1的元素开始取两条数据
eg:v-for=”val in arr | limityBy 2” 只取前2条数据
3、filterBy 取包含某个元素的数据
eg: v-for=”val in arr | filterBy ‘a’ 取包含’a’的数据
4、orderBy 1(升序)/2(降序)排序
eg: v-for="val in arr | orderBy 1"升序排序
eg: orderBy 年龄 1 按年龄升序排序
三、自定义过滤器
时间过滤器
<div class="box">

</div>
<script type="text/javascript">
    Vue.filter('date',function(input){
            var oDate=new Date(input);
            return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
        });

        var vm=new Vue({
            el:'.box',
            data:{
                a:Date.now()
            },
            methods:{

            }
        });```

相关文章

  • vue filter 过滤器使用

    格式化时间 自定义全局过滤器 vue 自定义过滤器分为"全局过滤器"和"局部过滤器"两种。 一、 全局过滤器 全局...

  • Vue过滤器

    vue2.0取消了自带的过滤器,只能自定义过滤器

  • Vue过滤器和vue-resource

    过滤器 之前我们学习了Vue的 vue基本指令 进阶学习,我们需要了解Vue的过滤器:Vue.js允许你自定义过滤...

  • vue自定义过滤器

    Vue的自定义过滤器有两种:全局过滤器和内部过滤器全局过滤器定义在vue实例化之前 内部过滤器注册在实例内部,仅在...

  • vue过滤器

    1.过滤器的写法 2.Vue1自带的过滤器 3.自定义过滤器

  • VUE02

    v-cloak ref monted Vue.directive()自定义指令 }) Vue.filter过滤器 ...

  • vue常用特性应用场景

    1 过滤器 Vue.filter 定义一个全局过滤器 2 自定义指令 让表单自动获取焦点 通过Vue.direc...

  • VUE初级入门实践

    VUE概述 生命周期 指令 内置指令 自定义指令 过滤器 内置过滤器 VUE1.0版本 VUE2.0版本(无内置过...

  • vue学习大纲3-过滤器、指令、动画

    自定义过滤器: 在vue1.0中有过滤器,比如: 在vue2.0中所有的内置过滤器都被销毁了,2.0推荐我们自己写...

  • Web前端-Vue.js必备框架(二)

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过...

网友评论

      本文标题:vue如何自定义过滤器

      本文链接:https://www.haomeiwen.com/subject/flxxkctx.html