Vue.js 自訂濾鏡
過濾器，本質上就是一個函數。其作用在於使用者輸入資料後，它能夠進行處理，並傳回一個資料結果。
Vue.js 與AngularJS 中的過濾器語法有些相似，使用管道符（|）進行連接，程式碼範例如下：
{{'abc' | uppercase}} 'abc' => 'ABC'這裡使用了Vue.js 內建的過濾器uppercase，將字串uppercase，將字串中的字母全部轉換成大寫形式。
Vue.js 支援在任何出現表達式的地方添加過濾器，除了上面範例中的雙大括號表達式之外，還可以在綁定指令的表達式後調用，程式碼範例如下：
<div id="app">
<span v-text="message | uppercase"></span>
</div>
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message:'hello world!'
}
})
</script>渲染為： => HELLO WORLD!
Vue 2.x 中，過濾器只能在mustache 綁定中使用。為了在指令綁定中實現同樣的行為，你應該使用計算屬性。
過濾器可以串聯：
{{ message | filterA | filterB }}
case 過濾器：把資料變成小寫形式
capitalize過濾器：把首字母變成大寫形式
// 'ABCDE' -> 'abcde' -> 'Abcde'
<div id="app">
<h1 id="ABCDE-nbsp-lowercase-nbsp-nbsp-capitalize-nbsp">{{'ABCDE' |lowercase | capitalize }}</h1>
</div>
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message:''
}
})
</script>過濾器函數將始終以表達式的值作為第一個參數，引號的參數會被當作字串處理，而不帶引號的參數會被當作資料屬性名來處理。
這裡的 message 將作為第一個參數，字串arg1 作為第二個參數，表達式 arg2 的值在計算出來以後作為第三個參數傳給過濾器。同時，Vue.js 的過濾器支援鍊式調用，上一個過濾器的輸出結果可以作為下一個過濾器的輸入
1、字母操作
Vue.js 內建了capcapitalize 、uppercase、lowercase 三個過濾器用於處理英文字元。注意：這三個過濾器僅針對英文字串使用
1-1、capitalize
capitalize 過濾器用於將表達式中的首字母轉換為大寫形式
{{ message | filterA('arg1', arg2) }}1-2、uppercase
uppercase 過濾器用於將表達式中的所有字母轉換為大寫形式
{{'abc' | capitalize}} // 'abc' => 'Abc'{{'abc' | uppercase}} // 'abc' => 'ABC'Vue.js 中內建了一個使用過濾器、filterBy、ordery
Vue.js 中內建了一個使用過濾器、filterBy、ordery forv-order 。
注意：這三個過濾器所處理的表達式的值必須是數組，否則程式會報錯
{{'ABC' | lowercase}} // 'ABC' => 'abc'<div id="app">
<ul>
<!--第二个参数不指定，即取全部，从0开始-->
<li v-for="item in items | limitBy">{{item}}</li>
</ul>
</div>
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
items:[1,2,3,4,5,6,7,8,9,10]
}
})
</script><div id="app">
<ul>
<!--只显示5个元素，从0开始-->
<li v-for="item in items | limitBy 5">{{item}}</li>
</ul>
</div>🜎
2-2、filterBy
filterBy過濾器的使用較為靈活，其第一個參數可以是字串或函數，過濾條件是：'string || function' + in + 'optionKeyName'
如果第一個參數是字串，那麼將在每個陣列元素中搜尋它，並傳回包含該字串的元素組成的陣列。程式碼範例如下：<div id="app">
<ul>
<!--显示4个，从下标为3的元素开始 注意：下标是从0开始-->
<li v-for="item in items | limitBy 4 3">{{item}}</li>
</ul>
</div><div id="app">
<ul>
<!--取6个，从下标为4的元素开始 注意：数组的长度是arr.length -->
<li v-for="item in items | limitBy items.length-4 4">{{item}}</li>
</ul>
</div>
只有函數傳回結果為 true的陣列元素才符合條件並將存入一個新的數組，最終傳回結果就是這個新的陣列。
2-3、orderBy
orderBy 過濾器的作用是傳回排序後的陣列。濾波條件是：'string || array || function' + 'order>=0 為升序 || order<=0 為降序'.
第一个参数可以是字符串、数组或者函数，第二个参数order可选，决定结果为升序或降序排列，默认为1，即升序排列
若输入参数为字符串，则可同时传入多个字符串作为排序键名，字符串之间以空格分隔。代码示例如下：
<ul>
<li v-for="user in users | orderBy 'lastName' 'firstName' 'age'">
{{user.lastName}} {{user.firstName}} {{user.age}}
</li>
</ul>此时，将按照传入的排序键名的先后顺序进行排序。也可以将排序键名按照顺序放入一个数组中，然后传入一个数组参数给 orderBy 过滤器即可。代码示例如下：
<!--sortKey = ['lastName' 'firstName' 'age'];-->
<ul>
<li v-for="user in users | orderBy sortKey">
{{user.lastName}} {{user.firstName}} {{user.age}}
</li>
</ul>升序排列：
<div id="app">
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | orderBy 1">
{{val}}
</li>
</ul>
</div>
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
a:'',
arr:['pear','cherry','lemon','orange']
}
})
</script>
降序排列：
<div id="app">
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | orderBy -1">
{{val}}
</li>
</ul>
</div> 
3、json 过滤器
Vue.js 中的 json 过滤器本质上是 JSON.stringify() 的精简缩略版，可将表达式的值转换为 JSON 字符串，即输出表达式经过 JSON.stringify() 处理后的结果。
json 可接受一个类型为 Number 的参数，用于决定转换后的 JSON 字符串的缩进距离，如果不输入该参数，则默认为2。
不输入参数，默认为2的示例：
<div id="app">
<p>{{information | json}}</p>
</div>
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
information:{'name':'Roger', 'age':26}
}
})
</script>
为了看到效果，我们输入一个参数20：
<div id="app">
<p>{{information | json 20}}</p> <!-- 以20个空格的缩进打印一个对象 -->
</div>
4、currency 过滤器
currency 过滤器的作用是将数字值转换为货币形式输出。
第一个参数接受类型为 String 的货币符号，如果不输入，则默认为美元符号$。
第二个参数接受类型为 Number的小数位，如果不输入，则默认为2.
注意：如果第一个参数采取默认形式，而需要第二个参数修改小数位，则第一个参数不可省略
不输入参数，默认形式
<div id="app">
<h1 id="amount-nbsp-nbsp-currency">{{amount | currency}}</h1>
</div>
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
amount: '12345'
}
})
</script>
使用其它货币符号：
<div id="app">
<h1 id="amount-nbsp-nbsp-currency-nbsp">{{amount | currency '￥'}}</h1>
</div>
将小数调整为3位：
<div id="app">
<h1 id="amount-nbsp-nbsp-currency-nbsp-nbsp">{{amount | currency '￥' 3}}</h1>
</div>
5、debounce 过滤器
debounce 过滤器的作用是延迟处理一定的时间执行。其接受的表达式的值必须是函数，因此，一般与 v-on 等指令结合使用。
debounce 接受一个可选的参数作为延迟时间，单位为毫秒。如果没有该参数，则默认的延迟时间为300ms，经过 debounce 包装的处理器在调用之后将至少延迟设定的时间再执行。 如果在延迟结束前再次调用，则延迟时长将重置为设定的时间。
通常，在监听用户 input 事件时使用 debounce 过滤器比较有用，可以防止频繁调用方法。debounce 的用法参考如下：
<input @keyup="onKeyup | debounce 500">
自定义过滤器
1、filter语法
在Vue.js 中也存在一个全局函数 Vue.filter 用于构造过滤器：
Vue.filter(filterName, function(input){...})
该函数接受两个参数，第一个参数为自定义的过滤器名称，第二个参数则是具体的过滤器函数，过滤器函数以值为参数，返回转换后的值
2、单个参数
注册一个名为 reverse 的过滤器，作用是将字符串反转输出。代码示例如下：
<div id="app">
<input v-model="message">
<span v-text="message | reverse">{{message}}</span>
</div>
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
Vue.filter('reverse',function(message){
return message.split('').reverse().join('');
});
new Vue({
el:'#app',
data:{
message:''
}
})
</script>
注册一个名为 double 的过滤器，作用是将数字补全成两位数输出。代码示例如下
<div id="app">
<input v-model="value">
<p v-text="value | double">{{value}}</p>
</div>
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
Vue.filter('double',function(value){
return value<10? '0'+value : value
});
new Vue({
el:'#app',
data:{
value:''
}
})
</script>
注册一个名为 date 的过滤器，作用是将当前时间毫秒数以年月日时分秒的格式输出。代码示例如下：
<div id="app">
<p v-text="message | date">{{message}}</p>
</div>
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
Vue.filter('date',function(message){
var now = new Date(message);
return now.getFullYear()+'-'
+(now.getMonth()+1)+'-'
+now.getDate()+' '
+(now.getHours()<12?'0'+now.getHours():now.getHours())+':'
+(now.getMinutes()<10?'0'+now.getMinutes():now.getMinutes())+':'
+now.getSeconds();
});
new Vue({
el:'#app',
data:{
message:Date.now()
}
})
</script>
3、多个参数
过滤器函数除了以值作为参数外，也可以接受任意数量的参数，参数之间以空格分隔。代码示例如下：
<div id="app">
<input v-model="message">
<p v-text="message | wrap 'before' 'end'">{{message}}</p>
</div>
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
Vue.filter('wrap',function(value, begin, end){
return begin +' '+ value + ' '+ end
});
new Vue({
el:'#app',
data:{
message:''
}
})
</script> 
4、双向过滤器
上面的过滤器都是在 Model 数据输出到 View 层之前进行数据转化的，实际上 Vue.js 还支持把来自视图（input元素）的值在写回模型前进行转化，即双向过滤器
Vue.filter('filterName',{
//model ---> view
//read 函数可选
read:function(val){
...
},
//view ---> model
//write 函数将在数据被写入Model 之前调用
//两个参数分别为表达式的新值和旧值
write:function(newVal, oldVal){
...
}
})
代码示例如下：
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message | twoWayFilter">
</div>
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
Vue.filter('twoWayFilter',{
read:function(val){
return 'read'+' '+val;
},
write:function(newVal, oldVal){
return oldVal+' '+ 'write';
}
});
new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script>在初始情况下，message 表达式的值经过 twoWayFilter 中的 read 函数处理，输出到 view 层
当我们在 input 框中修改 message 的值时，twoWayFilter 中的 write 函数将在数据输出到 Model 层之前处理，这里将返回 message 的旧值 + 'write'，然后输出到 Model层，因此 message的值变更为'hello world write' 并显示到页面上
常见问题解析
1、filterBy/orderBy 过滤后 $index 的索引
在使用 filterBy 或者 orderBy 对表达式进行过滤时，如果同时需要将 $index 作为参数，此时的 $index将会根据表达式数组或对象过滤后的值进行索引
<ul id="app">
<li v-for="item in items | orderBy 'age'">
{{item.name}} - {{$index}}
</li>
</ul>
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
items:[
{name:'Roger', age:26},
{name:'Sarahling', age:27},
{name:'Daisy', age:1}
]
}
})
</script>
2、自定义filter 的书写位置
自定义 filter 可以写在全局 Vue下，例如：
Vue.filter('reverse',function(message){
return message.split('').reverse().join('');
});
也可以写在Vue 实例当中，例如：
var vm = new Vue({
el:'#example',
data:{
},
filters:{
//自定义 filter 事件的位置
reverse:function(value){
return value.split('').reverse().join('');
}
}
})
二者本质上并无区别，可任选一种使用。但是，采用Vue.filter 在全局定义时，需要在实例化 Vue 之前定义，否则自定义的 filter 不起作用
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
深入探討vite是怎麼解析.env檔的
Jan 24, 2023 am 05:30 AM
使用vue框架開發前端專案時，我們部署的時候都會部署多套環境，往往開發、測試以及線上環境呼叫的介面網域都是不一樣的。如何能做到區分呢？那就是使用環境變數和模式。
圖文詳解如何在Vue專案中整合Ace程式碼編輯器
Apr 24, 2023 am 10:52 AM
Ace 是一個用 JavaScript 寫的可嵌入程式碼編輯器。它與 Sublime、Vim 和 TextMate 等原生編輯器的功能和效能相符。它可以很容易地嵌入到任何網頁和 JavaScript 應用程式中。 Ace 被維護為Cloud9 IDE的主要編輯器 ，並且是 Mozilla Skywriter (Bespin) 專案的繼承者。
vue中組件化和模組化有什麼區別
Dec 15, 2022 pm 12:54 PM
組件化和模組化的區別：模組化是從程式碼邏輯的角度進行劃分的；方便程式碼分層開發，確保每個每個功能模組的職能一致。元件化是從UI介面的角度進行規劃；前端的元件化，方便UI元件的重複使用。
探討如何在Vue3中撰寫單元測試
Apr 25, 2023 pm 07:41 PM
在當今前端開發中，Vue.js 已經成為了一個非常流行的框架。隨著 Vue.js 的不斷發展，單元測試變得越來越重要。今天，我們將探討如何在 Vue.js 3 中編寫單元測試，並提供一些最佳實踐和常見的問題及解決方案。
深入聊聊vue3中的reactive()
Jan 06, 2023 pm 09:21 PM
前言：在vue3的開發中，reactive是提供實現響應式資料的方法。日常開發這個是使用頻率很高的api。這篇文章筆者就來探索其內部運作機制。
Vue中JSX語法和模板語法的簡單比較（優劣勢分析）
Mar 23, 2023 pm 07:53 PM
在Vue.js中，開發人員可以使用兩種不同的語法來建立使用者介面：JSX語法和範本語法。這兩種文法各有優劣，以下就來探討它們的差異和優劣勢。
怎麼查詢目前vue的版本
Dec 19, 2022 pm 04:55 PM
查詢目前vue版本的兩種方法：1、在cmd控制台內，執行「npm list vue」指令查詢版本，輸出結果就是vue的版本號資訊；2、在專案中找到並開啟package.json文件，查找「dependencies」項目即可看到vue的版本資訊。
