前記：

創(chuàng)新互聯(lián)建站長(zhǎng)期為上千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為壽陽(yáng)企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、成都網(wǎng)站制作，壽陽(yáng)網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

排版記錄，點(diǎn)耽誤時(shí)間，我就簡(jiǎn)單的來(lái)，下面是一個(gè)vue 過(guò)濾器的寫(xiě)法，demo 演示，限制一個(gè)字符串的長(zhǎng)度。

vue filter 的官網(wǎng)介紹 https://cn.vuejs.org/v2/guide/filters.html

下面就具體拿自己的一個(gè)例子介紹：

某個(gè)filter.js

// 限制漢字的個(gè)數(shù)
export const limitWordLength = Vue.filter('limitWordLength', (str, length, sufix) => {
 /* eslint-disable */
 let r = /[^\x00-\xff]/g // 雙字節(jié)正則
 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
})

然后在某一個(gè)組件中引用

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

使用：

{{news.summary | limitWordLength(26, '...')}}

過(guò)濾器  limitWordLength 傳遞三個(gè)參數(shù)，第一個(gè)默認(rèn)是  news.summary， 第二個(gè)是 26 ，第三個(gè)是 '...', 如果這個(gè)過(guò)濾器方法要處理的東西 ，只要一個(gè)  news.summary 參數(shù)就可以的話，后面的參數(shù)也可以不傳，直接這樣

{{news.summary | limitWordLength}}

效果是這樣的：

限制是26個(gè)字符，對(duì)應(yīng)的漢子就是13個(gè)，如果超出就用 ... 替換。

當(dāng)然，在實(shí)際的應(yīng)用中，想這種限制漢字的個(gè)數(shù)，達(dá)到前端展示的話，可以用下面的css ,替換，目前在主流的設(shè)備上是可以兼容的，如果不是非常兼容低版本的，可直接用css代替過(guò)濾器：

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

總結(jié)

以上所述是小編給大家介紹的vue的過(guò)濾器filter實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！