Vue.js--过滤器

最新推荐文章于 2022-10-18 22:41:49 发布

吴声子夜歌

最新推荐文章于 2022-10-18 22:41:49 发布

阅读量733

点赞数 4

分类专栏： Vue.js 文章标签： Vue.js 过滤器

本文链接：https://blog.csdn.net/cold___play/article/details/102404970

版权

Vue.js 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

Vue.js支持在 {{}} 插值的尾部添加一个管道符“（|）”对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的，通过给Vue实例添加选项filters来设置。

示例：对时间进行格式化处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="myApp">
        {{date | formatDate}}
    </div>
    <script>
        //在月份、日期、小时等小于10时前面补0
        var padDate = function (value) {
            return value < 10 ? '0' + value : value;
        }

        var app = new Vue({
            el: '#myApp',
            data: {
                date: new Date()
            },
            filters: {
                formatDate: function (value) {
                    var date = new Date(value);
                    var year = date.getFullYear();
                    var month = padDate(date.getMonth() + 1);
                    var day = padDate(date.getDate());
                    var hours = padDate(date.getHours());
                    var minutes = padDate(date.getMinutes());
                    var seconds = padDate(date.getSeconds());
                    //返回数据
                    return year + '-' + month + '-' + day + '-' + hours + ':' + minutes + ':' + seconds;
                }
            },
            mounted: function(){
                var _this = this;//声明一个变量指向Vue实例的this，保证作用域一致
                this.timer = setInterval(function(){
                    _this.date = new Date();//修改数据date
                }, 1000);
            },

            beforeDestroy: function(){
                if(this.timer){
                    clearInterval(this.timer);//Vue实例清除前，销毁定时器
                }
            }
        });
    </script>
</body>
</html>

在这里插入图片描述
注意：过滤器也可以串联，而且可以接收参数，例如：

<!-- 串联 -->
{{ message | filterA | filterB }}
<!-- 接受参数:arg1和arg2将分别传给过滤器的第二个和第三个参数，因为第一个是数据本身 -->
{{ message | filterA('arg1, 'arg2') }}

示例：求四次方：

<!--过滤器串联 -->
<div id="app">
    <h1>{{num}}的四次方是：{{num | aquare | cube}}</h1>
    <input v-model="num">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            num: 10
        },
        filters: {
            aquare: function(value){
                return value * value;
            },
            cube: function (value) {
                return value * value;
            }
        }
    });
</script>

在这里插入图片描述

吴声子夜歌

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js--过滤器

Vue.js支持在 {{}} 插值的尾部添加一个管道符“（|）”对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的，通过给Vue实例添加选项filters来设置。示例：对时间进行格式化处理<!DOCTYPE html><html lang="en"><head> <meta charset="...
复制链接

扫一扫