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')">
  • 相关阅读:
    两种&
    安装版Windows是必须的
    检验CSS3.0兼容性的有趣东东
    Quadro和Geforce系列的区别
    ECMAScript
    多拉A梦的CSS(6) :not
    多拉A梦的CSS(1) Transform
    表单
    关于a元素的伪类
    多拉A梦的CSS(4) gradient
  • 原文地址:https://www.cnblogs.com/wuqilang/p/12350386.html
Copyright © 2011-2022 走看看