【vue】vue常规操作——过滤器

过滤器

过滤器可以用来处理数据（格式化数据）
自定义过滤器指令
既可以定义局部指令
也可以定义全局指令

过滤器的使用：既可以在插值表达式中使用，也可以使用到属性绑定中
如下：

    <div id="app">
        <label>用户名</label>
        <div>{{uname| upper}}</div>
        <input type="text" v-model.lazy="uname" />
        <span>{{tip}}</span>
    </div>
     <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        Vue.filter("upper", function (val) {
            return val.charAt(0).toUpperCase()+val.slice(1)
        }
        )

        var vm = new Vue({
            el: "#app",//vue：元素挂在位置，填充数据的位置
            data: {
                uname: "",
                tip: "",
                msg:"hello"
            },
            methods: {
                checkName: function (uname) {
                    var that = this;
                    setTimeout(function () {
                        if (uname == "admin") {
                            that.tip = "用户名已经存在，请更换"
                        } else {
                            that.tip = "用户名可以使用"
                        }
                    }, 2000)
                }

            },
            watch: {
                uname: function (val) {
                    //调用后台结构，验证用户名的合法性
                    this.checkName(val);
                    this.tip = "正在验证";
                }
            }
            //模型数据，可以放很多的键值对，填充到html中的数据

        });

带参数的过滤器的用法

        Vue.filter("format", function (value, arg) {
            if (arg == "yyyy-MM-dd") {
                var ret = "";
                ret += value.getFullYear() + "-" + (value.getMonth() + 1) + "-" + value.getDate();
                return ret;
            }
            return value
        })

使用的时候，带参数使用

<div>{{data|format("yyyy-MM-dd")}}</div>

附带：
日期格式化的常用规则

英文单词一一对应