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