vue的過(guò)濾器filter實(shí)例詳解
前記：
排版記錄，點(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'
使用：
<p class="news-cont">{{news.summary | limitWordLength(26, '...')}}</p>
過(guò)濾器 limitWordLength 傳遞三個(gè)參數(shù)，第一個(gè)默認(rèn)是 news.summary， 第二個(gè)是 26 ，第三個(gè)是 '...', 如果這個(gè)過(guò)濾器方法要處理的東西 ，只要一個(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代替過(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ì)腳本之家網(wǎng)站的支持！
相關(guān)文章
本篇文章主要介紹了詳解在Vue中通過(guò)自定義指令獲取dom元素 ，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-03-03
Vue?3引入了Composition?API，這是一套新的API用于編寫(xiě)組件，作為Options?API的替代，這篇文章主要介紹了如何優(yōu)化?Vue.js?應(yīng)用程序,需要的朋友可以參考下2023-02-02
vue?首頁(yè)加載,速度優(yōu)化及解決首頁(yè)白屏的問(wèn)題
這篇文章主要介紹了vue?首頁(yè)加載,速度優(yōu)化及解決首頁(yè)白屏的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-10-10
詳解vue中引入stylus及報(bào)錯(cuò)解決方法
這篇文章主要介紹了詳解vue中引入stylus及報(bào)錯(cuò)解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了vue element el-transfer增加拖拽功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue實(shí)現(xiàn)列表無(wú)縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表無(wú)縫滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了搭建vue開(kāi)發(fā)環(huán)境的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
解決Vue3使用Element-Plus導(dǎo)航刷新后active高亮消失的問(wèn)題
這篇文章主要給大家介紹了如何解決Vue3使用Element-Plus導(dǎo)航刷新后active高亮消失的問(wèn)題,文中有相關(guān)的代碼講解,需要的朋友可以參考下2023-08-08
Vue?uni-app框架實(shí)現(xiàn)上拉加載下拉刷新功能
uni-app是一個(gè)使用Vue.js(opens?new?window)開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書(shū)/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)2022-09-09
vue?實(shí)現(xiàn)彈窗關(guān)閉后刷新效果
這篇文章主要介紹了vue?實(shí)現(xiàn)彈窗關(guān)閉后刷新效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04