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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
js获取图片长和宽度的代码
Nov 24 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
vue组件生命周期详解
Nov 07 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 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
新52大事件
2020/03/03 欧美动漫
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
vue 实现特定条件下绑定事件
2019/11/09 Javascript
python爬取拉勾网职位数据的方法
2018/01/24 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
如何理解Python中包的引入
2020/05/29 Python
实例代码讲解Python 线程池
2020/08/24 Python
pytorch中index_select()的用法详解
2021/01/06 Python
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
大学生党课思想汇报
2013/12/29 职场文书
优秀教研组申报材料
2014/12/26 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
python OpenCV学习笔记
2021/03/31 Python
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
Python安装使用Scrapy框架
2022/04/12 Python