过滤器

关键词:filter

可用与插值表达式和属性绑定

支持级联操作

过滤器(无参)

下面我将用代码演示过滤器可与插值表达式和属性绑定并且支持级联操作

	<div id="app">
        <h3>{{msg|upper|high}}</h3>
        <h2 v-bind:info="msg|upper">属性测试</h2>
        <input type="text" v-model="msg" />
    </div>

Vue.filter('upper',function(v){     //v表示使用这个过滤器的对象
        return v.charAt(0).toUpperCase()+v.slice(1).toLowerCase();
    });
    Vue.filter('high',function(v){     //v表示使用这个过滤器的对象
        return '<span style="color:red">'+v+'</span>';
    });
    var vm=new Vue({
        el:"#app",
        data:{
            msg:''
        }
    })

效果图: 插值表达式内容显示成功,并且成功第一个首字母大写,其余小写

过滤器(有参)

直接代码演示（显示当前时间,通过过滤器实现格式）

 <h1>过滤器用法--带参</h1>
    <div id="app">
        <h2>{{now | cndata('yyyy-MM-dd')}}</h2>
    </div>

  Vue.filter('cndata',function(v,arg){
        if(arg='yyyy-MM-dd'){
            let year=v.getFullYear();
            let month=v.getMonth()+1;//0开始算的
            let day=v.getDate();
            return `${year}-${month}-${day}`;
        }
    })
    var vm=new Vue({
        el:"#app",
        data:{
            now:new Date()
        },
        methods:{
            
        }
    })

效果图: 成功显示当前时间按照过滤器的格式

过滤器的了解使用就到此完结~ 看看代码就懂了

Vue2中过滤器的使用

目录

过滤器

过滤器(无参)

过滤器(有参)