A filter writing
{{ message | Filter}}
Two filters that come with Vue: capitalize
Function: Capitalize the first letter
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue's own filter</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
{{message | capitalize}}
</div>
<script type="text/javascript">
var myVue = new Vue (
el: ".test",
data: {
message: "abc"
}
})
</script>
</body>
</html>
The output of the above code: Abc
Three Vue's own filters: uppercase
Function: all caps
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue's own filter</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
{{message | uppercase}}
</div>
<script type="text/javascript">
var myVue = new Vue (
el: ".test",
data: {
message: "abc"
}
})
</script>
</body>
</html>
The output of the above code: ABC
Four filters that come with Vue: uppercase
Function: all lowercase
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue's own filter</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
{{message | lowercase}}
</div>
<script type="text/javascript">
var myVue = new Vue (
el: ".test",
data: {
message: "ABC"
}
})
</script>
</body>
</html>
The output of the above code: abc
Five filters that come with Vue: currency
Function: output money and decimal point
parameter:
first parameter {String} [货币符号] - 默认值: '$'
second parameter {Number} [小数位] - 默认值: 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue's own filter</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
{{message | currency}} <!--output $123.47-->
{{message | currency '¥' "1"}} <!--输出$123.5-->
</div>
<script type="text/javascript">
var myVue = new Vue (
el: ".test",
data: {
message: "123.4673"
}
})
</script>
</body>
</html>
Six Vue's own filters: pluralize
Function: If there is only one parameter, the plural form simply adds an "s" at the end. If there are multiple parameters, the parameters are treated as an array of strings, corresponding to one, two, three... plural words. If the number of values is more than the number of parameters, the last parameter is used.
parameter:{String} single, [double, triple, ...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue's own filter</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
{{message}} {{message | pluralize 'item'}} <!--输出: 1 item-->
<ul v-for="item in lili">
<li>
{{item}} {{item | pluralize 'item'}} <!--输出: 1 item 2 items 3 items-->
</li>
</ul>
<ul v-for="item in lili">
<li>
{{item}} {{item | pluralize 'st' 'rd'}} <!--输出: 1 st 2 rd 3 rd-->
</li>
</ul>
<ul v-for="item in man">
<li>
{{item}} {{item | pluralize 'item'}} <!--输出: 1 item 2 items 3 items-->
</li>
</ul>
<ul v-for="item in man">
<li>
{{item}} {{item | pluralize 'st' 'rd'}} <!--输出: 1 st 2 rd 3 rd-->
</li>
</ul>
</div>
<script type="text/javascript">
var myVue = new Vue (
el: ".test",
data: {
message: 1,
lili: [1,2,3],
man: {
name1: 1,
name2: 2,
name3: 3
}
}
})
</script>
</body>
</html>
Seven filters that come with Vue: debounce
(1) Restriction: need to be used in @
(2) Parameters:{Number} [wait] - 默认值： 300
(3) Function: Wrap the processor, let it delay the execution of x ms, the default delay is 300ms. The wrapped handler will be delayed at least x ms after the call, if called again before the delay expires, the delay is reset to x ms.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue's own filter</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<button id="btn" @click="disappear | debounce 10000">Click me and I will disappear in 10 seconds</button>
</div>
<script type="text/javascript">
var myVue = new Vue (
el: ".test",
methods: {
disappear: function () {
document.getElementById("btn").style.display= "none";
}
}
})
</script>
</body>
</html>
Eight filters that come with Vue: limitBy
(1) Restriction: need to be used in v-for (ie array)
(2) Two parameters:
The first parameter:{Number} 取得数量
Second parameter:{Number} 偏移量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue's own filter</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<ul v-for="item in lili | limitBy 10"> <!--输出1 2 3 4 5 6 7 8 9 10-->
<li>{{item}}</li>
</ul>
<ul v-for="item in lili | limitBy 10 3"> <!--输出 4 5 6 7 8 9 10 11 12 13-->
<li>{{item}}</li>
</ul>
</div>
<script type="text/javascript">
var myVue = new Vue (
el: ".test",
data: {
lili: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
}
})
</script>
</body>
</html>
Nine Vue's own filters: filterBy
(1) Restriction: need to be used in v-for (ie array)
(2) Three parameters:
The first parameter: {String | Function} The string to search for
The second parameter: in (optional, specifies the search position)
The third parameter: {String} (optional, array format)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue's own filter</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<ul v-for="item in lili | filterBy 'o' "> <!--输出oi oa lo ouo oala-->
<li>{{item}}</li>
</ul>
<ul v-for="item in man | filterBy 'l' in 'name' "> <!--输出lily lucy-->
<li>{{item.name}}</li>
</ul>
<ul v-for="item in man | filterBy 'l' in 'name' 'dada' "> <!--输出lily+undefined lucy+undefined undefined+lsh-->
<li>{{item.name+"+"+item.dada}}</li>
</ul>
</div>
<script type="text/javascript">
var myVue = new Vue (
el: ".test",
data: {
lili: ["oi", "oa", "ll", "lo" ,"ouo" ,"kk" ,"oala"],
man: [ //Note here that man is an array, not an object
{name: "lily"},
{name: "lucy"},
{name: "oo"},
{dada: "lsh"},
{dada: "ofg"}
]
}
})
</script>
</body>
</html>
Ten Vue's own filters: orderBy
(1) Restriction: need to be used in v-for (ie array)
(2) Three parameters:
The first parameter: {String | Array<String> | Function} The string to search for
The second parameter: {String} The optional parameter order determines the result in ascending order ( order >= 0) or descending order ( order < 0), the default is ascending order
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue's own filter</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<!-- Traverse the array-->
<ul v-for="item in lili | orderBy 'o' 1"> <!--输出kk ll oi-->
<li>{{item}}</li>
</ul>
<ul v-for="item in lili | orderBy 'o' -1"> <!--输出oi ll kk-->
<li>{{item}}</li>
</ul>
<!-- Traverse an array containing objects-->
<ul v-for="item in man | orderBy 'name' 1"> <!--输出Bruce Chuck Jackie-->
<li>{{item.name}}</li>
</ul>
<ul v-for="item in man | orderBy 'name' -1"> <!--输出Jackie Chuck Bruce-->
<li>{{item.name}}</li>
</ul>
<!--Sort by function-->
<ul v-for="item in man | orderBy ageByTen"> <!--输出Bruce Chuck Jackie-->
<li>{{item.name}}</li>
</ul>
</div>
<script type="text/javascript">
var myVue = new Vue (
el: ".test",
data: {
lili: ["oi", "kk", "ll"],
man: [ //Note here that man is an array, not an object
{
name: 'Jackie',
age: 62
},
{
name: 'Chuck',
age: 76
},
{
name: 'Bruce',
age: 61
}
]
},
methods: {
ageByTen: function () {
return 1;
}
}
})
</script>
</body>
</html>