vue的过滤器filter实例详解
更新时间：2018年09月17日 10:58:39 作者：adouwt
本文通过实例代码给大家介绍了vue的过滤器filter的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
前记：
排版记录，点耽误时间，我就简单的来，下面是一个vue 过滤器的写法，demo 演示，限制一个字符串的长度。
vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html
下面就具体拿自己的一个例子介绍：
某个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>
效果是这样的：
限制是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实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
vue3中使用ref和emit来减少props的使用示例详解
现在在开发vue3项目的过程中，我们开发小组渐渐的减少props的使用，转而用ref 和 emit 来代替，这篇文章主要介绍了vue3中使用ref和emit来减少props的使用,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue如何监听某个元素的大小变化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue数据监听解析Object.defineProperty与Proxy区别
这篇文章主要为大家介绍了vue数据监听解析Object.defineProperty Proxy源码示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了Vue通过Blob对象实现导出Excel功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-07
vue提供了mixins、extends配置项，最近使用中发现很好用。下面小编通过本文给大家介绍下vue中 mixins和extends的巧妙用法，需要的朋友参考下吧2017-12-12
这篇文章主要介绍了Vue组件设计-Sticky布局,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue下history模式刷新后404错误解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue项目引进ElementUI组件的方法，本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-11-11
Vue插件报错:Vue.js is detected on this page.问题解决
这篇文章主要介绍了Vue插件报错:Vue.js is detected on this page.问题解决,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-07-07
今天小编就为大家分享一篇快速解决vue在ios端下点击响应延时的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论