vue过滤器实例详解

前言：

排版记录，稍微耽误一下，我就简单来了，下面是一个写vue的滤镜，演示演示，限制一个字符串的长度。

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

下面是你自己的一个具体例子：

filter.js

//限制汉字个数导出const限制字长=vue.filter('限制字长'，(str，length，sufix)={/* eslit-disable */let r=/[\ x00-\ Xff]/g//双字节正则字母m if (str。替换(r '，* * ')。长度长度){m=数学。地板(长度/2)为(设I=m，l=str。长度；I l；I) {if (str。子串(0，1)。替换(r '，* * ')。长度=长度){返回字符串。substr (0，I) sufix}} return str})然后在某个组件中被引用

从“”导入{限制单词长度}./filter.js '用法：

p class=' news-cont ' { news . summary | LimitWordLength(26)，')}}/p filter limit字长传递三个参数，第一个是news.summary默认情况下，第二个是26，第三个是“.”。如果这个过滤方法是处理某件事，只有一条新闻。summary参数是必需的。

p class=' news-cont“{ news。summary |限制字长}}/p效果如下：

限制为26个字符，对应的男性人数为13人。如果超过极限，用…替换。

当然，在实际应用中，如果想限制汉字数量，实现前端显示，可以用下面的css来代替。目前在主流设备上兼容。如果它与较低版本不太兼容，可以直接使用css代替过滤器：news-cont { font-size : 12px；color: # 747474飞越：隐藏；文本-overflow:省略号；display :-web kit-box；-web kit-line-clamp : 2；-web kit-box-oriented :垂直；}摘要

以上是边肖介绍的vue滤波器的例子的详细说明，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！