欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue的過濾器filter實(shí)例詳解

 更新時(shí)間：2018年09月17日 10:58:39   作者：adouwt  
本文通過實(shí)例代碼給大家介紹了vue的過濾器filter的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

前記：

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

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'

使用：

<p class="news-cont">{{news.summary | limitWordLength(26, '...')}}</p>

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

<p class="news-cont">{{news.summary | limitWordLength}}</p>

效果是這樣的：

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

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

.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的過濾器filter實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論