vue自定义过滤器及指令

Author Avatar
秦晓飞 4月 10, 2017

自定义vue过滤器及指令

vue自定义过滤器

学过angular的宝宝应该对过滤器并不陌生，首先先来说下angular自定义过滤器，他使用的是filter方法。传入两个参数，第一个是过滤器的名字，第二个回调函数。
同样的vue的自定义过滤器也是使用filter方法，通过Vue调用。使用方法也是通过|的形式。

1
2
Vue.filter("name",callBack);
<div>{{msg|name}}</div>

例如，创建一个date（年-月-日 时：分：秒）的过滤器

1
2
3
4
5
6
7
8
9
10
11
Vue.filter("date",function(input){//input就是传过来的msg
    var oDate=new Date(input);
    return oDate.getFullYear()+"-"+(oDate.getMonth()+1)+"-"+oDate.getDate()+" "+oDate.getHours()+":"+oDate.getMinutes()+":"+oDate.getSeconds();
});
var vm=new Vue({
    el:"body",
    a:Date.now();//时间戳
});
------------------
//html部分
<div>{{a|date}}<div>

一个时间过滤器这么简单就创建成功了！如果有其他需求可以在回调函数里添加逻辑代码，变成符合要求的过滤器！

自定义指令

是的！和angular中一样自定义指令用的是directive方法，用法基本相同

1
2
3
Vue.directive("name",callBack);
   //html部分
<div v-name></div>//注意这里name前面必须加v-，而自定义的时候不用加。

例如，自定义一个v-red指令，当使用这个指令时让该元素的背景颜色变为红色

1
2
3
4
5
Vue.directive("red",function(){
    this.el.style.background="red";
})
//html部分
<div v-red>我是一个div</div>

自定义v-red指令就成功了!

自定义元素指令

就是调用elementDirective方法，第一个参数是自定义的元素名字，第二个对象，和自定义指令稍有不同。

1
2
3
4
5
6
7
Vue.elementDirective("name",{
    bind:function(){
        this.el.style.background="blue";//使用这个元素时，背景变为蓝色
    }
})
//html部分
<name>我是自定义元素中的内容</name>

如果行自定义带有某功能的元素，可以这样做哦！

expand_less