解讀vue filter
阿新 • • 發佈：2018-11-18
brush return light 添加多個 html fir UNC fun 管道符
1.全局filter, 全局的過濾一般在main.js裏面使用
<div id="app">
<div>
{{testVal | filVal(10,30)}}
</div>
</div>
<script>
Vue.filter(‘filVal‘, function(val, first, second) {
return val + first + second;
});
new Vue({
el: ‘#app‘,
data:
testVal: 20
},
})
</script>
2.局部filter, filter要放在new vue裏面, 此時filter要加上s==>filters
new Vue({
el: ‘#app‘,
data: {
testVal: 20
},
methods: {
},
filters: {
filVal: function(val, val1, val2) {
return val + val1 + val2
}
}
})
不管是全局過濾還是布局過濾,都是可以傳多個值得 ,渲染時用管道符分隔. 在上面傳的三個值中,第一個是要過濾的值, 後面的值是過濾傳的參數
3,添加多個filter
<div id="app">
<div>
{{testVal | filVal1(10,30) | filVal2("測試") | filVal3("====")}}
</div>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
testVal: 20,
filTest: "測試測試"
},
methods: {
},
filters: {
filVal1: function(val, val1, val2) {
return val + val1 + val2
},
filVal2: function(val, val2) {
return val + val2
},
filVal3: function(val, val2) {
return val + val2
},
}
})
</script>
解讀vue filter