zoukankan      html  css  js  c++  java
  • 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')">
  • 相关阅读:
    20199131-2020-3-18 《网络攻防实践》第3周作业
    20199131-第2次作业-网络攻防实践
    20199131-第1次作业-网络攻防概述
    20199131《网络攻防实践》假期作业
    学习《深入理解计算机系统(第三版)》第二章总结
    学习《构建之法(第三版)》第一章总结
    关于宏的使用和Vim及其插件安装的学习总结
    细读《从问题到程序(第二版)》第一章学习总结
    细读《深入理解计算机系统(第三版)》第一章学习总结
    可信计算
  • 原文地址:https://www.cnblogs.com/wuqilang/p/12350386.html
Copyright © 2011-2022 走看看