首页 > 其他 > 详细

Vue_过滤器

时间:2020-03-13 14:01:07      阅读:65      评论:0      收藏:0      [点我收藏+]

前言

明确一个概念————过滤器的本质是函数。其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果。Vue.js与AngularJS相似,使用管道符(|)进行连接

vue1.0有内置过滤器,2.0已经移除。

Vue中文文档关于过滤器的链接

ex.局部过滤器

<div id="app">
    <p>{{msg|dateText('yyyy-mm-dd hh:mm:ss')}}</p>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
        msg:new Date()
    },
    methods:{},
    filters:{
        dateText:function(dateStr,params1){
            var dt=new Date(dateStr);
            var y=dt.getFullYear();
            var m=(dt.getMonth()+1).toString().padStart(2,"0");
            var d=dt.getDate().toString().padStart(2,"0");
            if(params1&&params1=='yyyy-mm-dd'){
                return `${y}-${m}-${d}`;
            }else{
                var hh=dt.getHours().toString().padStart(2,"0");
                var mm=dt.getMinutes().toString().padStart(2,"0");
                var ss=dt.getSeconds().toString().padStart(2,"0");
                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
            }
        }
    }
})
</script>

ex.全局过滤器

<div id="app">
    <p>{{msg|uppercase}}</p>
</div>
<script>
    Vue.filter('uppercase',function(msg){
        return msg.toUpperCase();
    })
    var vm=new Vue({
        el:"#app",
        data:{
            msg:'hello'
        },
        methods:{}
    })
</script>

Vue_过滤器

原文:https://www.cnblogs.com/Syinho/p/12435962.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!