Table of contents
filter
Official address: Filter - Vue.js (vuejs.org)
Filter means that Vue.js supports adding a pipe character "(|)" at the end of { {}} interpolation to filter data.
Often used to format text, such as capitalization of letters, use of thousands in currency, comma separation, conversion time, etc.
HTML writing:
in double curly braces
{
{ name | chilema }}In `v-bind`, it is supported since 2.1.0
<div v-bind:id="rawId | formatId"></div>Define filter:
Use the filters keyword to define filters
The filters defined here are local filters, where they are defined and where they are used.
Code example:
The value parameter in the chilema method is the value on the left side of the double curly braces |
Remember that if the return is not written, nothing will be displayed in the browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{
{name|chilema}}
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app=new Vue({
el:"#app",//绑定一个元素
data() {
return {
name:"张三"
}
},
filters:{
chilema(value){
return value+"，你吃了吗"
}
}
})
</script>
</html>Browser output:
Define a global filter:
Global filters are not used much, but they are used according to different situations
Code example:
When the global filter and the local filter have the same name, the local filter will be adopted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{
{name|helema}}
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.filter("helema",function(value){
return value+"，你喝了吗"
})
var app=new Vue({
el:"#app",//绑定一个元素
data() {
return {
name:"张三"
}
},
filters:{
chilema(value){
return value+"，你吃了吗"
}
}
})
</script>
</html>Browser output:
Filter concatenation:
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{
{name|chilema|helema}}
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
Vue.filter("helema",function(value){
return value+"，你喝了吗"
})
var app=new Vue({
el:"#app",//绑定一个元素
data() {
return {
name:"张三"
}
},
filters:{
chilema(value){
return value+"，你吃了吗"
}
}
})
</script>
</html>explain:
The value of name will be passed to chilema as a parameter, and then the result of chilema will be passed to helema
The final filter shown is the last one
Browser output:
Filter with parameters:
{
{ name | chilema('arg1', arg2) }}chilema has three parameters, the name will be its first parameter, the ordinary string 'arg1' will be the second parameter, and arg2the value of the expression will be the third parameter.
Vue code:
chilema(value,arg1,arg2){
return value+"，你吃了吗"
}Timestamp to time
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{
{Mytime | zhuanhuanTime01}}
<br>
{
{Mytime | zhuanhuanTime02}}
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
Mytime:new Date()
}
},
filters:{
zhuanhuanTime01(value){
var date = new Date(value);
Y = date.getFullYear();
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) ;
D = date.getDate() ;
h = date.getHours() ;
m = date.getMinutes();
s = date.getSeconds();
console.log(Y+M+D+h+m+s);
return Y+'-'+M+'-'+D+' '+h+':'+m+':'+s;
},
zhuanhuanTime02(value){
var date = new Date(value);
Y = date.getFullYear();
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) ;
D = date.getDate() ;
h = date.getHours() ;
m = date.getMinutes();
s = date.getSeconds();
console.log(Y+M+D+h+m+s);
return Y+'年'+M+'月'+D+'日 '+h+'时'+m+'分'+s+'秒';
}
}
});
</script>
</html>Browser output:
