您的位置:首页 > Web前端 > Vue.js

vue过滤器的学习

2019-08-16 12:49 525 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/qq_35081380/article/details/99675731

比如要搜索文章,或者限制描述的文字的长度,让标题首字母大写,在标题前面加上固定的几个字体都可以轻松实现


首先来说一下限制文章内容的长度

全局的:后面加三个点更形象

[code]//过滤器
Vue.filter('fixedlength', function (value) {
//slice 截取字符串长度
return value.slice(0, 100) + "...";
})

固定长度

 

 

局部的过滤器
在本地的实例中,添加如下代码即可,和全局的使用方式一样,这个就只能在局部使用了
 

[code]filters: {
'fixedlength': function(value) {
return value.slice(0, 100) + "...";
}
}

自定义指令局部的方式也是一样
 

[code]//全局自定义指令
Vue.directive('rainbow', {
//el:那个标签使用了,el就指向那个标签,binding:是传递过来的值,vnode:虚拟节点
bind(el, binding, vnode) {
el.style.color = "#" + Math.random().toString().substr(2, 6)
}
})

//局部指令,注意这里的rainbow是一个对象
directives: {
'rainbow': {
bind(el, binding, vnode) {
el.style.color = "#" + Math.random().toString().substr(2, 6)
}
}
}

 

自定义搜索博客

[code]computed: {
//搜索功能
filteredBlogs: function () {
return this.blogs.filter((blog) => {
//过滤的是博客的标题
return blog.title.match(this.search)

})
}
},

注意:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: