Vue過(guò)濾器的用法和自定義過(guò)濾器使用
更新時(shí)間：2017年02月08日 11:46:20 作者：香農(nóng)·良
本篇文章主要介紹了Vue過(guò)濾器的用法和自定義過(guò)濾器，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
1、過(guò)濾器的用法,用 ‘|' 分割表達(dá)式和過(guò)濾器。
例如：{{ msg | filter}} {{msg | filter(a)}} a就標(biāo)識(shí)filter的一個(gè)參數(shù)。
用兩個(gè)過(guò)濾器：{{msg | myfilter | myfilternumber }}
2、自定義的過(guò)濾器
過(guò)濾器的結(jié)構(gòu)為：Vue.filter("id",function(value,a){});
value是過(guò)濾器的一個(gè)參數(shù)，也是默認(rèn)的原始值。a是自定義的一個(gè)參數(shù)。
自定義過(guò)濾器的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<!--輸出的字符串中a的個(gè)數(shù)-->
<span>msg的值：{{msg}},其中a的個(gè)數(shù)：</span> {{msg | myfilter('a')}}
<br>
<!--輸出的字符串中b的個(gè)數(shù)-->
<span>msg的值：{{msg}},其中b的個(gè)數(shù)：</span> {{msg | myfilter | myfilternumber}}
</div>
</body>
<script type="text/javascript">
Vue.filter("myfilter", function(value, arg) {
//返回一個(gè)對(duì)象或者json字符串，列出字符串中的字符以及字符的個(gè)數(shù),不區(qū)分大小寫(xiě)
var obj = {};
var s = value.split('').sort().join("");
var reg = /(.)\1+/ig;
var str = s.replace(reg, "$1"); //字符串去重后的結(jié)果
var i = 0,
n,
a;
while (s.length > 0) {
a = str.charAt(i);
n = s.lastIndexOf(a) + 1;
obj[a] = n;
s = s.substring(n);
i++;
}
return arg ? obj[arg] : obj;
});
Vue.filter("myfilternumber", function(value) {
return value.b;
});
var app1 = new Vue({
el: "#app",
data: {
msg: "a1a1aba2babac"
},
methods: {
}
});
</script>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli3 打包優(yōu)化之 splitchunks詳解
這篇文章主要介紹了vue-cli3 打包優(yōu)化之 splitchunks的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
通過(guò)配置多頁(yè)面應(yīng)用，從而將給子模塊依賴分隔開(kāi)各自加載，可以減少初始資源的請(qǐng)求，加快頁(yè)面的訪問(wèn)速度，這篇文章主要介紹了vue3+vite配置多頁(yè)面的詳細(xì)過(guò)程,需要的朋友可以參考下2023-06-06
Vite是一個(gè)開(kāi)發(fā)環(huán)境工具，旨在提高我們的開(kāi)發(fā)速度,下面這篇文章主要給大家介紹了關(guān)于如何為老vue項(xiàng)目添加vite支持的相關(guān)資料,需要的朋友可以參考下2021-09-09
Vue響應(yīng)式原理及雙向數(shù)據(jù)綁定示例分析
這篇文章主要為大家介紹了Vue響應(yīng)式原理及雙向數(shù)據(jù)綁定的示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue中this.$parent的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要給大家介紹了在vue.js中抽出公共代碼的方法，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-06-06
解決Vue3報(bào)錯(cuò):Property?“xxx“?was?accessed?during?render?but
這篇文章主要給大家介紹了關(guān)于解決Vue3報(bào)錯(cuò):Property?“xxx“?was?accessed?during?render?but?is?not?defined?on?instance.的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
vue3+ts+element-plus實(shí)際開(kāi)發(fā)之統(tǒng)一調(diào)用彈窗封裝的詳細(xì)過(guò)程
這篇文章主要介紹了vue3+ts+element-plus實(shí)際開(kāi)發(fā)之統(tǒng)一調(diào)用彈窗封裝的詳細(xì)過(guò)程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
vue實(shí)現(xiàn)密碼顯示與隱藏按鈕的自定義組件功能
本文通過(guò)兩種思路給大家介紹vue實(shí)現(xiàn)密碼顯示與隱藏按鈕的自定義組件功能，感興趣的朋友跟隨小編一起看看吧2019-04-04
使用Vue3實(shí)現(xiàn)一個(gè)穿梭框效果的示例代碼
這篇文章主要給大家介紹了如何使用?Vue3?實(shí)現(xiàn)一個(gè)穿梭框效果,當(dāng)選中數(shù)據(jù),并且點(diǎn)擊相對(duì)應(yīng)的方向箭頭時(shí),選中的數(shù)據(jù)會(huì)發(fā)送到對(duì)面,并且數(shù)據(jù)會(huì)保持正確的順序進(jìn)行排列,文中有詳細(xì)的代碼講解,具有一定的參考價(jià)值,需要的朋友可以參考下2023-12-12