vue2.0 过滤器用法

最新推荐文章于 2022-10-24 22:51:57 发布

scorpio_h

最新推荐文章于 2022-10-24 22:51:57 发布

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue 2.0 过滤器

本文链接：https://blog.csdn.net/scorpio_h/article/details/57085472

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

vue2.0取消了大部分过滤器，现在基本靠手写规则了。。

例如，以前的 limitBy 2 ，只显示数字的前两个数据，现在必须通过computer手写方法。如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="(value,key) in arrFilter">
                {{value}} {{key}}
            </li>
        </ul>
    </div>
    <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script>
    <script>
        var vm=new Vue({
            data:{
                arr:['apple','banana','orange']
            },
            computed: {
                arrFilter:function(){
                    return this.arr.slice(0,2);
                }
            }
        }).$mount('#box')
    </script>
</body>
</html>

还有就是自定义过滤器了。。。例如希望过滤出来的数字都+1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">
        {{a|add}}
    </div>
    <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script>
    <script>
        Vue.filter('add',function(input){
            return input+1;
        })

        var vm=new Vue({
            data:{
                a:1
            }
        }).$mount('#box')
    </script>
</body>
</html>

最后再来一个当前时间过滤器。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">
        {{time | date}}
    </div>
    <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script>
    <script>
        Vue.filter('date',function(input){
            var oDate=new Date(input);
            return oDate.getFullYear()+"/"+(oDate.getMonth()+1)+"/"+oDate.getDate()+" "+oDate.getHours()+":"+oDate.getMinutes()+":"+oDate.getSeconds();
        })

        var vm=new Vue({
            data:{
                time:Date.now()
            }
        }).$mount('#box')
    </script>
</body>
</html>

scorpio_h

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2.0 过滤器用法

vue2.0取消了大部分过滤器，现在基本靠手写规则了。。例如，以前的 limitBy 2 ，只显示数字的前两个数据，现在必须通过computer手写方法。如下： Document {{value}} {{key}}
复制链接

扫一扫

专栏目录