Table of contents
Fourth, the filter receives multiple parameters
Vue.js allows custom filters, which can be used for some common text formatting (that is, modifying text, but the text content will not change)
Filters can be used in two places: double curly brace interpolation or v-bind expressions
1. Partial filter
Example of local filter usage:
<div id="root">
<p>电脑价格：{
{price | addPriceIcon}}</p>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
price:200
},
filters: {
//处理函数
addPriceIcon(value){
console.log(value);
return '¥' + value;
}
}
})
</script>Results of the:
The requirement of this code is to add the RMB symbol (¥) in front of the price. The Chinese version of the template (price) needs to add a pipe symbol (|) as a separator, and the pipe symbol (|) is followed by a text processing function (addPriceIcon), and the first parameter of the processing function is the text content before the pipe symbol (price).
2. Global filter
Example of global filter usage:
<div id="root">
<p>电脑价格：{
{price | addPriceIcon}}</p>
</div>
<script>
Vue.config.productionTip = false;
Vue.filter("addPriceIcon",(value)=>{
return '¥' + value;
})
const vm = new Vue({
el: '#root',
data: {
price:200
}
})
</script>Results of the:
Note: When the global filter and the local filter have the same name, the local filter will be used
Three, filter series
Filters can also be chained, for example:
{ {prices | filterA | filterB}}
filterA is defined as a filter parameter that accepts a single parameter, and the value of the expression price will be passed as a parameter. Then continue to call the filter function filterB, which is also defined to receive a single parameter, and pass the result of filterA to filterB .
Example of filter concatenation:
<div id="root">
<p>电脑价格：{
{price | addPriceIcon | addChinesePriceIcon}}</p>
</div>
<script>
Vue.config.productionTip = false;
Vue.filter("addPriceIcon",(value)=>{
return '¥' + value;
})
Vue.filter("addChinesePriceIcon",(value)=>{
return '人民币' + value;
})
const vm = new Vue({
el: '#root',
data: {
price:200
}
})
</script>Results of the:
Fourth, the filter receives multiple parameters
Filters are JavaScript functions, so can receive two parameters:
{ { price | filterA(arg) }}
filterA is defined as a filter parameter that receives two parameters. Among them, the value of price is used as the first parameter, and the value of the expression arg can be used as the second parameter, and multiple parameters can also be received
Filter accepts two parameter examples:
<div id="root">
<p>电脑价格：{
{price | addPriceIcon(unit)}}</p>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
price:200,
unit:"(元)"
},
filters: {
// 处理函数
addPriceIcon(value1,value2){
return '¥' + value1 + value2;
}
}
})
</script>Results of the:
Example of filter receiving multiple parameters:
<div id="root">
{
{al | filterAa(a2,a3,...an...)}}
</div>
<script>
filters: {
// 处理函数
addPriceIcon(a1,a2,a3,...an...){
//a1是传入的第1个参数
//a2是传入的第2个参数
//a3是传入的第3个参数
//......
//an是传入的第n个参数
}
</script>