欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue系列教程-10vue过滤器和自定义指令

程序员文章站 2022-03-03 09:17:23
...

本内容为系列内容,全部内容请看我的vue教程分类

vuefilter过滤器

这个过滤器其实可以看成就是 保安 这样一个,对资源做一些处理,当然不仅仅是看门这么简单

我们这里举例 比如敏感字符串的过滤

全局过滤器

那么和组件一样,有全局的私有的,我们先来定义全局的

在vue实例化之前定义,首先 msgFormat这个是过滤器的名称 然后我们使用replace处理一下字符串再返回

Vue.filter('msgFormat', function (str) {
    return str.replace('我去', '***');
})

我们在 data中定义一个字符串

title: '我去大家好',

我们在页面中使用过滤器 ,我们的数据在前,需要使用的过滤器在后,中间使用 **|**隔开,这样就会调用过滤器来处理这个字符串了

<div id="app">
    {{title|msgFormat}}
</div>

私有过滤器

这里我们定义一个私有过滤器,这里我们处理性别,将数字 1 2 转换为具体的字符串

filters: {
    sexFormat(sex) {
        return sex == 1 ? '男' : '女';
    }
}

data中定义一个user

user: {
    name: 'lili',
    sex: 1
}

使用这个过滤器

<div id="app">
    {{title|msgFormat}}<br />
    {{user.name}}-{{user.sex|sexFormat}}
</div>

看看效果

vue系列教程-10vue过滤器和自定义指令

vuedirective自定义指令

那么上面我们用来很多的vue提供的指令 比如 v-model v-on,那么我们能不能自己定义一些指令呢?

当然是可以的

定义全局自定义指令

同样指令也是有全局和自定义的,上面写了这么多了,这里也就不多bb了

这里我们定义个 自定义颜色的指令

Vue.directive('color', {
    // 指令绑定时间触发
    bind: function (el, val) {
        el.style.color = val.value
    },
    // 元素插入dom时触发
    inserted: function (el) {
        // el.style.color = 'blue'
    },
    // 元素更新时触发
    updated: function (el) {
        el.style.color = 'blue'
    }
})

定义一个私有的自定义指令

let vm = new Vue({
    el: '#app',
    data() {
        return {
            
        }
    },
    directives: {
        'fontsize': {
            bind: function (el, val) {
                el.style.fontSize = val.value
            }
        }
    }
})

使用

这里有人会问 为啥双引号里面又是单引号啊,大家还记得吗,v-xxx的指令里面,传递的是JavaScript代码块,比如一个对象,数组,那么我们传入一个字符串肯定是需要一个单引号的,当然你也可以在 data中定义一个字符串然后传入

<div id="app">
    <div v-color="'red'">red</div>
    <div v-fontsize="'100px'">fontsize</div>
</div>

看看效果

vue系列教程-10vue过滤器和自定义指令