In Vue 2.0, there is no longer a built-in filter. You need to define your own filter. The method of definition is as follows:
Register a custom filter that takes two parameters: the filter ID and the filter function.
Vue.filter('filtername',function(value,parameter){
return parameter+value.split('').reverse().join('');
});
The first parameter value in function defaults to the value in the data object using this filter. In this case, it is the value 'you are mine' of msg.
Pit 1: the first parameter must be its own value, and any number of parameters can be added later. If the number order is reversed, an error will occur.
Here is the most common small example to illustrate several other pits encountered when using the vue2.0 filter with v-text:
Requirement: output a inverted string on the page.
The complete code is as follows:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<script src='./vue2.js'></script>
<script>
window.onload=function(){
//Similar to the custom instruction, you can register a custom filter with the global method Vue.filter(), which takes two parameters: the filter ID and the filter function.
Vue.filter('reverseString',function(value,myString){
// The first parameter value in function defaults to the data value of the filter. In this case, it is the value 'you are mine' of msg. Please note: the first parameter must be its own value, and any number of parameters can be added after it
return myString+value.split('').reverse().join('');
});
new Vue({
el:'#box',
data:{
msg:'you are mine'
}
});
};
</script>
<body>
<div id='box'>
<p>msg is: <br>{{msg}}</p>
<hr>
<p>reverse msg is: <br>{{msg|reverseString( 'Hello:' )}}</p><!-- stay vue2.0 Li filter can only be written with similar functions reverseString( 'I must tell you:')，Parameters in parentheses, different from vue1.0 The writing method of adding parameter after space" msg|reverseString 'I must tell you:' " -->
<!-- <p v-text="msg|reverseString( 'I must tell you:' )"></p>Invalid -->
<!-- v-text The internal filter fails because vue2.0 Inner pipe Rune'|'Can only be used in mousetache and v-bind in -->
</div>
</body>
</html>
The output result is:
msg is: you are mine reverse msg is: Hello:enim era uoy
Pit 2: in vue2.0, the filter can only be written in reverse string ('I must tell you: '), with parameters in brackets, which is different from the writing method of adding parameters after spaces in vue1.0;
Pit 3: the filter used in v-text fails, because in vue2.0, the pipe character '|' can only be used in mousetache and v-bind.
The above is just a simple filter usage. If it involves complex data processing filters, such as the implementation of the filter sleeve filter function in vue1.0, I feel that I can use computed instead of the filter.