Vue 过滤器的基本使用

Vue的过滤器使用

时间格式化过滤器

    <div id="app">
        <p>{{currentTime | dateTimeManager}}</p>
    </div>
	<scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js" />
    <script type="text/javascript">
        //自定义全局过滤器
        /*
              语法：Vue.filter
              参数1：为改过滤器命名
              参数2：函数，指定过滤器的行为
                        函数参数：我们需要操作的数据
         */
        Vue.filter("dateTimeManager",function (datetime) {
            //取得日期时间的具体数值
            //将年月日时分秒分别取出，格式化为 2019-01-10 10-10-10
            var y = datetime.getFullYear();
            var m = (datetime.getMonth()+1).toString().padStart(2,"0");
            var d = datetime.getDate().toString().padStart(2,"0");
            var h = datetime.getHours().toString().padStart(2,"0");
            var mm = datetime.getMinutes().toString().padStart(2,"0");
            var s = datetime.getSeconds().toString().padStart(2,"0");
            return `${y}-${m}-${d}  ${h}:${mm}:${s}`;

        })


        var vm = new Vue({
            el : "#app",
            data : {
                currentTime : new Date()
            }
        });
    </script>

大小写的转换过滤

	<div id="app">
        <p>{{str1 | ucase}}</p>
    </div>	
	<scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js" />
    <script type="text/javascript">
        //自定义全局过滤器
        /*
              语法：Vue.filter
              参数1：为改过滤器命名
              参数2：函数，指定过滤器的行为
                        函数参数：我们需要操作的数据
         */
        Vue.filter("ucase",function (value) {
            value = value.toUpperCase(); //转换为大写
            // value = value.toLowerCase(); //转换为小写
            return value;
        })


        var vm = new Vue({
            el : "#app",
            data : {
                str1 : "aAa"
            }
        });
    </script>