Vue中自定义指令和过滤器的使用

自定义指令的用法

<script>
    //1,创建model
    var exampleData = {
        count:0,
        color:"#000"
    };
    //2,创建Vue例子
    new Vue({
        el:"#app",
        data:exampleData,
        directives:{
            hello:{  //自定义指令的名字
                bind:function (el,bindings) {//绑定时的发生的函数，只执行一次
                    console.log(el);         //el指向了当前指令绑定的元素上
                    console.log(bindings)    //bindings指的是元素上绑定的数v-hello="count"
                },
                update:function (el,bindings) {//发生变化时的发生的函数，可执行多次
                    el.value=parseInt(el.value)+10  ;
                    console.log();

                },
                unbind:function (el,bindings) {//终止指令时的发生的函数，只执行一次
                    console.log("终止指令");
                }
            },
            changeBackgroundColor:{
                bind:function (el,bindings) {
                    console.log("我绑定成功了")
                },
                update:function (el,bindings) {
                    el.style.background=bindings.value;//修改当前元素的背景色
                }
            }
        }
    });
</script>

过滤器的使用

<script>
    //1,创建model
    var exampleData = {
        price:153,
        text:"juhGofkUHkaHUlj"
    };
    //2,创建Vue例子
    new Vue({
        el:"#app",
        data:exampleData,
        filters:{     //过滤器指令的名字
            myCurrency:function (myInput,arg1) { //自定义过滤器的函数
                console.log(myInput);            //myInput指向了this.price
                console.log(arg1);               //arg1指向了$也就是函数传入的参数<h1>{{price | myCurrency('$')}}</h1>
                var result = arg1+myInput;
                return result;
            },
            myTextTransform:function (myInput,arg1) {
                if(arg1){                        //可以传布尔值来做判断<h1>{{text | myTextTransform(true)}}</h1>
                    var result = myInput.toUpperCase();
                }else {
                    var result = myInput.toLowerCase();
                }
                return result;
            }
        }
    });
</script>

获取时间戳可以通过

new Date().getTime();
    1554960378173

在vue中可以通过自定义过滤，让时间变为我们想要的样子
比如 2019-4-11 13:26
示例

filters:{ 
    date:function(value){
                    let d =new Date(value);
                    return d.getFullYear()+'-'+
                    (d.getMonth()+1)+'-'+d.getDate()+' '+
                    d.getHours()+':'+d.getMinutes();
                }
	}