vue的過濾器filter實例詳解
更新時間：2018年09月17日 10:58:39 作者：adouwt
本文通過實例代碼給大家介紹了vue的過濾器filter的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
前記：
排版記錄，點耽誤時間，我就簡單的來，下面是一個vue 過濾器的寫法，demo 演示，限制一個字符串的長度。
vue filter 的官網(wǎng)介紹 https://cn.vuejs.org/v2/guide/filters.html
下面就具體拿自己的一個例子介紹：
某個filter.js
// 限制漢字的個數(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
})
然后在某一個組件中引用
import { limitWordLength } from '../filter.js'
使用：
<p class="news-cont">{{news.summary | limitWordLength(26, '...')}}</p>
過濾器 limitWordLength 傳遞三個參數(shù)，第一個默認是 news.summary， 第二個是 26 ，第三個是 '...', 如果這個過濾器方法要處理的東西 ，只要一個 news.summary 參數(shù)就可以的話，后面的參數(shù)也可以不傳，直接這樣
<p class="news-cont">{{news.summary | limitWordLength}}</p>
效果是這樣的：
限制是26個字符，對應(yīng)的漢子就是13個，如果超出就用 ... 替換。
當(dāng)然，在實際的應(yīng)用中，想這種限制漢字的個數(shù)，達到前端展示的話，可以用下面的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實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
本篇文章主要介紹了詳解在Vue中通過自定義指令獲取dom元素 ，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
Vue?3引入了Composition?API，這是一套新的API用于編寫組件，作為Options?API的替代，這篇文章主要介紹了如何優(yōu)化?Vue.js?應(yīng)用程序,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue?首頁加載,速度優(yōu)化及解決首頁白屏的問題，具有很好的參考價值，希望對大家有所幫助。2022-10-10
這篇文章主要介紹了詳解vue中引入stylus及報錯解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue element el-transfer增加拖拽功能，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了搭建vue開發(fā)環(huán)境的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
解決Vue3使用Element-Plus導(dǎo)航刷新后active高亮消失的問題
這篇文章主要給大家介紹了如何解決Vue3使用Element-Plus導(dǎo)航刷新后active高亮消失的問題,文中有相關(guān)的代碼講解,需要的朋友可以參考下2023-08-08
Vue?uni-app框架實現(xiàn)上拉加載下拉刷新功能
uni-app是一個使用Vue.js(opens?new?window)開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個平臺2022-09-09
這篇文章主要介紹了vue?實現(xiàn)彈窗關(guān)閉后刷新效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04