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>
看看效果
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指令(三)
下一篇: vue.js常用指令