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 相关文章推荐
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
在JavaScript中实现链式调用的实现
Dec 24 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
其他功能
2006/10/09 PHP
Smarty安装配置方法
2008/04/10 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
PHP序列化操作方法分析
2016/09/28 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
php实现用户登陆简单实例
2017/04/04 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
详解vue v-model
2020/08/31 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
python实现简易通讯录修改版
2018/03/13 Python
python实现随机梯度下降法
2020/03/24 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
最美乡村医生事迹材料
2014/06/02 职场文书
护理专业自我评价
2015/03/11 职场文书