• vue过滤器 Vue.filter() filters


     作用:过滤数据

        语法:
            全局:
                Vue.filter("过滤器名",(参数一,参数二)=>{});
                    参数一:需要过滤的数据
                    参数二:传递的数据

            局部:
                filters:{
                    过滤器名(){

                    }
                }
        
        使用:{{username|过滤器名()}}

        步骤:

        (1)时间过滤器
            ①声明一个全局过滤器
                Vue.filter("date",(data,icon)=>{
                    let year=(new Date(data)).getFullYear();
                    let month=(new Date(data)).getMonth()+1;
                    let day=(new Date(data)).getDate();
                    var icon=icon||"/";
                    return `${year}${icon}${month}${icon}${day}`; 
                });
            ②实例中设置一个time:
                let vm=new Vue({
                    el:"#app",
                    data:{
                        time:(new Date()).getTime()
                    }
                });
            ③管道符进行使用:
                {{time|date("-")}}
        
        (2)图片尺寸过滤器
            ①data中将imgUrl引入:
                data(){
                    return{
                        imgUrl:"http://p0.meituan.net/w.h/movie/2c24eb6a84a92b9ba837967851bec9462844109.jpg"
                    }
                }
            ②声明局部filters:
                filters:{
                    imgReplace(data,wh){
                        // 将字符串 "w.h" 替换为 "170.280"
                        return data.replace(/w.h/,wh);
                    }
                }
            ③页面中使用:
                <img :src="imgUrl|imgReplace('170.280')">
  • 相关阅读:
    RAM,ROM,内存还有硬盘到底有什么区别呢
    MySQL中的这个池子
    apk安装包介绍(下载安装,存储的位置,路径,可以对里面的文件进行修改吗)
    论文查询
    PID算法
    数组指针与指针数组
    2020 最佳开源项目出炉
    反射机制调用无参和有参方法以及调用私有方法
    CSS概述 CSS声明
    WEB概述
  • 原文地址:https://www.cnblogs.com/wuqilang/p/12350386.html
Copyright © 2020-2023  润新知