In vue2.0, there is no longer a filter that comes with it, and you need to define the filter yourself. The defined method is as follows:
Register a custom filter that takes two parameters: filter ID and filter function.
('filtername',function(value,parameter){
return parameter+('').reverse().join('');
});
The first parameter value in the function defaults to the value in the data object using this filter. In this case, the value of msg 'you are mine'.
Pit 1:The first parameter must be its own value, and as many parameters can be added after it. If the number order is reversed, it will make mistakes.
Here is a most common example to illustrate several other pitfalls encountered when using vue2.0 filters and combining v-text:
Requirements: Output a string in reverse order 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='./'></script>
<script>
=function(){
//Similar to custom directives, you can register a custom filter with a global method () which receives two parameters: filter ID and filter function. ('reverseString',function(value,myString){
// The first parameter value in the function defaults to using the data value of this filter. In this case, the value of msg 'you are mine'. Please note: the first parameter must be its own value, and as many parameters can be added afterwards return myString+('').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><!-- existvue2.0inside Filters can only be written in similar functionsreverseString( 'I must tell you:')，Parameters are in brackets，Different fromvue1.0How to write with spaces and add parameters" msg|reverseString 'I must tell you:' " -->
<!-- <p v-text="msg|reverseString( 'I must tell you:' )"></p>Ineffective -->
<!-- v-textinside用过滤器Ineffective，原因是existvue2.0inside Pipeline symbol‘|'只能用existmousetacheandv-bindmiddle -->
</div>
</body>
</html>
The output result is:
msg is: you are mine reverse msg is: Hello:enim era uoy
Pit 2:In vue2.0, filters can only be written in reverseString( ‘I must tell you:’), with parameters in brackets, which are different from the writing method of using spaces and adding parameters after vue1.0;
Pit 3:The use of filters in v-text is invalid because in vue2.0, the pipeline character '|' can only be used in mousetache and v-bind.
The above is just a simple usage of a filter. If it involves complex data processing filters, such as implementing the function of filter set filters in vue 1.0, I personally feel that computed can also be used instead of filters. I hope it will be helpful to everyone's learning and I hope everyone will support me more.