vue的过滤器filter实例详解


Posted in Javascript onSeptember 17, 2018

前记:

排版记录,点耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度。

vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html

vue的过滤器filter实例详解

下面就具体拿自己的一个例子介绍:

某个filter.js

// 限制汉字的个数
export const limitWordLength = Vue.filter('limitWordLength', (str, length, sufix) => {
 /* eslint-disable */
 let r = /[^\x00-\xff]/g // 双字节正则
 let m
 if (str.replace(r, '**').length > length) {
  m = Math.floor(length / 2)
  for (let i = m, l = str.length; i < l; i++) {
   if (str.substr(0, i).replace(r, '**').length >= length) {
    return str.substr(0, i) + sufix
   }
  }
 }
 return str
})

然后在某一个组件中引用

import { limitWordLength } from '../filter.js'

使用:

<p class="news-cont">{{news.summary | limitWordLength(26, '...')}}</p>

过滤器  limitWordLength 传递三个参数,第一个默认是  news.summary, 第二个是 26 ,第三个是 '...', 如果这个过滤器方法要处理的东西 ,只要一个  news.summary 参数就可以的话,后面的参数也可以不传,直接这样

<p class="news-cont">{{news.summary | limitWordLength}}</p>

效果是这样的:

vue的过滤器filter实例详解

限制是26个字符,对应的汉子就是13个,如果超出就用 ... 替换。

当然,在实际的应用中,想这种限制汉字的个数,达到前端展示的话,可以用下面的css ,替换,目前在主流的设备上是可以兼容的,如果不是非常兼容低版本的,可直接用css代替过滤器:

.news-cont {
  font-size: 12px;
  color: #747474;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
 }

总结

以上所述是小编给大家介绍的vue的过滤器filter实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
js实现div在页面拖动效果
May 04 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 #Javascript
React Router V4使用指南(精讲)
Sep 17 #Javascript
关于vue编译版本引入的问题的解决
Sep 17 #Javascript
理顺8个版本vue的区别(小结)
Sep 17 #Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 #Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 #Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 #Javascript
You might like
利用php获取服务器时间的实现代码
2013/06/07 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
Python requests模块实例用法
2019/02/11 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
餐饮加盟计划书
2014/01/10 职场文书
毕业论文评语大全
2014/04/29 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
课内比教学心得体会
2014/09/09 职场文书
考试作弊检讨书
2015/01/27 职场文书
经理岗位职责范本
2015/04/15 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
交通事故协议书范本
2016/03/19 职场文书