1. 局部定义过滤器
<!--
* @Descripttion: vue过滤器-filter
* @version:
* @Author: zhangfan
* @email: [email protected]
* @Date: 2020-07-03 09:10:28
* @LastEditors: zhangfan
* @LastEditTime: 2020-07-14 14:13:56
-->
<template>
<div class="container">
<p>原数据:{{message}}</p>
<p>反转后的数据:{{message | reverseMessage}}</p>
<p>转换成大写后的数据:{{message | toUpperCase}}</p>
<p>过滤器串联后的数据:{{message | toUpperCase | reverseMessage}}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: "abcdefg"
};
},
filters: {
reverseMessage: function(value) {
return value
.split("")
.reverse()
.join("");
},
toUpperCase: function(value) {
return value.toUpperCase();
}
}
};
</script>
<style scoped lang="less">
</style>2. 全局定义过滤器
在main.js中定义全局过滤器
Vue.filter('addNamePrefix', (value) => {
return 'my name is' + value;
});
<!--
* @Descripttion: vue过滤器-filter
* @version:
* @Author: zhangfan
* @email: [email protected]
* @Date: 2020-07-03 09:10:28
* @LastEditors: zhangfan
* @LastEditTime: 2020-07-14 16:05:46
-->
<template>
<div class="container">
<p>原数据:{{message}}</p>
<p>反转后的数据:{{message | reverseMessage}}</p>
<p>转换成大写后的数据:{{message | toUpperCase}}</p>
<p>过滤器串联后的数据:{{message | toUpperCase | reverseMessage}}</p>
<p>使用全局过滤器后的数据:{{message | addNamePrefix}}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: "abcdefg"
};
},
filters: {
reverseMessage: function(value) {
return value
.split("")
.reverse()
.join("");
},
toUpperCase: function(value) {
return value.toUpperCase();
}
}
};
</script>
<style scoped lang="less">
</style>3. 计算属性筛选，methods方法筛选
<!--
* @Descripttion: vue过滤器-filter
* @version:
* @Author: zhangfan
* @email: [email protected]
* @Date: 2020-07-03 09:10:28
* @LastEditors: zhangfan
* @LastEditTime: 2020-07-14 16:17:27
-->
<template>
<div class="container">
<p>原数据:{{message}}</p>
<p>反转后的数据:{{message | reverseMessage}}</p>
<p>转换成大写后的数据:{{message | toUpperCase}}</p>
<p>过滤器串联后的数据:{{message | toUpperCase | reverseMessage}}</p>
<p>使用全局过滤器后的数据:{{message | addNamePrefix}}</p>
<p>使用全局过滤器后的数据:{{arr}}</p>
<p>在computed中使用后的数据:{{changeArr}}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: "abcdefg",
arr: [1, 2, 3, 4, 5, 6]
};
},
filters: {
reverseMessage: function(value) {
return value
.split("")
.reverse()
.join("");
},
toUpperCase: function(value) {
return value.toUpperCase();
}
},
computed: {
changeArr: function() {
const vm = this;
let arrList = vm.arr;
return arrList.filter(function(item) {
return item % 2 == 0;
});
}
}
};
</script>
<style scoped lang="less">
</style>