1. Introduction to filter
1.1. Global filter and local filter
A filter is essentially a function, similar to a custom directive .
global filter
Vue.filter(id, [definition])
local filter
new Vue({
el: '#app',
filters: {
definition(value): {
...
}
}
})Case: a global filter that converts the first letter of a string to uppercase
Vue.filter('capitalize', function (value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
})If replaced by a local filter
let vm = new Vue({
el: '#app',
data: { // 参数定义，字典形式
},
computed: { // 计算属性，多次调用，只计算一次
},
methods: { // 普通方法，多次调用，多次计算
},
filters: { // 过滤器
capitalize(value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
})
Notice:
- When the global filter and the local filter have the same name, the local filter will be used
- Like custom commands, global filters can be used in the template of any Vue instance, while local filters can only be used in the view bound to that instance
Filters can be used in two places:
Double curly braces: {
{ variable | filter }}
v-bind expression: v-bind:href="variable | filter"
2. Filter parameters
A filter function always receives the value of an expression as the first parameter. A filter is essentially a JS function and can naturally receive multiple parameters.
It is not recommended to make the filter function very complicated, which violates the original design intention of the filter, for example: Vue.filter('format', function (value, ...params) {...})
Example: A filter that adds prefixes and suffixes to the value of an expression
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>过滤器</h2>
<!-- 输出：vue-filters.js -->
<p>{
{ filename | format('vue', suffix) }}</p>
</div>
<script src="VueJs/vue.js"></script>
<script>
Vue.filter('format', function (value, prefix, suffix) {
if (!value) return '';
value = value.toString();
return prefix + "-" + value + "." + suffix;
})
let vm = new Vue({
el: '#app',
data: {
filename: 'filters',
suffix: 'js'
},
computed: { // 计算属性，多次调用，只计算一次
},
methods: { // 普通方法，多次调用，多次计算
},
filters: { // 过滤器
}
})
</script>
</body>
</html>3. The series connection of filters
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.profile {}
</style>
</head>
<body>
<div id="app">
<h2>过滤器</h2>
<!-- 输出结果：DLROW OLLEH -->
<p>{
{ message | uppercase | reverse }}</p>
</div>
<script src="VueJs/vue.js"></script>
<script>
Vue.filter('uppercase', function (value) {
if (!value) return '';
value = value.toString();
return value.toUpperCase();
})
Vue.filter('reverse', function (value) {
if (!value) return '';
value = value.toString();
return value.split('').reverse().join('');
})
let vm = new Vue({
el: '#app',
data: {
message: 'hello world'
},
computed: { // 计算属性，多次调用，只计算一次
},
methods: { // 普通方法，多次调用，多次计算
},
filters: { // 局部过滤器
}
})
</script>
</body>
</html>