zoukankan      html  css  js  c++  java
  • vue 过滤器

    过滤器

    • 作用:对数据进行处理
    全局过滤器
    • 使用方法
    vue.filter("过滤器的名字",(data)=>{
        data 要过滤的数据
        数据处理
        返回数据 //返回什么页面就显示什么
    })
    使用过滤器
    {{过滤数据 | 过滤器的名字}}
    
    
    试一试:获取时间
    {{time|timefilter}}        //2020.2.20
    {{time|timefilter('/')}}   //2020/2/20
    {{time|timefilter('-')}}    //2020-2-20
    
    Vue.filter("timefilter",(data,tag)=>{
        //data 数据 tag 参数
        var tag = tag || '.';
        let y = (new.Date()).getFullYear()
        let m = (new.Date()).getMonth()+1
        let d = (new.Date()).getDate()
        return `${y}${tag}${m}${tag}${d}`
    })
    
    局部过滤器
    • 与全局过滤器使用方法一样,只不过定义在filters属性里
    filters:{
        //定义了一个名字为timefilter的过滤器.第一个参数即是你要过滤的值
        timefilter(data,tag)=>{
        let y = (new.Date()).getFullYear()
        let m = (new.Date()).getMonth()+1
        let d = (new.Date()).getDate()
        return `${y}${tag}${m}${tag}${d}`  //返回的内容,即是你过滤完成的值。
    })
    }
    
    案例:过滤图片地址
        数组:7d8a867c870b22bc74c87c348b75528djpeg
        过滤成:https://cube.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg
        所用到字符串的截取与拼接方法
    
            Vue.filter("myfilter", (data) => {
                    let a = data.substr(0,1);
                    let b = data.substr(1,2);
                    let c = data.slice(3);
                    let path = `https://cube.elemecdn.com/${a}/${b}/${c}.jpeg`;
                    return path;
                }
            )
    
  • 相关阅读:
    ME51N ME52N创建修改采购申请…
    修改数据库表 字段参考的数据…
    python 变量赋值,引用,初始化问题
    python 在eclipse中的中文问题
    python全局变量在 函数中 修改
    正则表达式
    matlab 笔记
    python class self thread join __init__.py
    Quora, Yahoo Answer
    分区,grub,boot.cfg,
  • 原文地址:https://www.cnblogs.com/zhaoxinran997/p/12334327.html
Copyright © 2011-2022 走看看