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) }) } },
注意:
相关文章推荐
- Vue.js学习之过滤器详解
- vue学习笔记:2.vue过滤器
- vue学习-过滤器
- Vue学习3-7.生命周期;8.自定义指令;9.过滤器;10.路由
- Vue中自定义过滤器的学习
- vue.js学习09之vue2.x实现vue1.x中默认的过滤器
- Vue.js过滤器学习
- Vue入门学习笔记【基本概念、对象、过滤器、指令等】
- vue.js学习 自定义过滤器使用(1)
- Vue.js学习 Item14 – 过滤器与自定义过滤器
- Vue.js学习系列(二十二)--过滤器
- Vue1.0学习总结(1)———指令、事件、绑定属性、模板、过滤器
- vue中的过滤器学习
- vue.js学习 自定义过滤器使用(2)
- Vue.js学习系列(二十二)--过滤器
- Vue.js学习 Item14 – 过滤器与自定义过滤器
- vue学习(二) vue生命周期 vue自定义指令和过滤器
- 《vue2.0 框架学习》--过滤器
- vue学习第18天,过滤器 单文件组件
- vue学习(一) vue指令和过滤器