It should be noted that the built-in filter has been removed in Vue.js 2.0
Vue.js filter usage
Vue.js allows you to customize filters that can be used for some common text formatting. Filters can be used in two places: double brace interpolation and v-bind expressions (the latter is supported since 2.1.0+). Filters should be added at the end of JavaScript expressions, |indicated
10 filters built into Vue.js
1. capitalizeConvert the first character of the string to uppercase
2. Convert the uppercasestring to uppercase
3. lowercaseConvert the string to lowercase
4. The currencyparameter is {String}[currency symbol],{Number}[decimal place], convert the number into a currency symbol, and will automatically add numeric section numbers
{{ amount | currency ' ¥' 2 }} // -> 若 amount 值为 10000，则输出¥10,000.005. pluralizeThe parameter is {String} single, [double, triple], and the string is pluralized.
If an argument is received, the plural form is to add an "s" directly to the end of the string. If it receives multiple parameters, it will be treated as an array, and the value of the corresponding array subscript will be added to the string. If the number of strings is more than the number of parameters, the value of the last parameter will be added to the excess part.
<p v-for="c in count">{{ c | pluralize 'item' }} {{ c | pluralize 'st' 'nd' 'rd' 'th' }}</p>
输出： 1 item 1st / 2 items 2nd / 3itrms 3rd / 4 items 4th6. jsonThe parameter is {Number}[indent] the space indentation number, which has the same function as JSON.stringify(), and outputs the json object data into a string that conforms to the json format.
7. The incoming value of debounce must be a function, and the parameter is optional, which is {Number}[wait], that is, the delay time. The effect is that the action will be executed after n milliseconds of calling the function, and the execution time will be recalculated if the action is called again within n milliseconds.
<input v-on:keyup ="onKeyup | debounce 500"> // input元素上监听了keyup事件， 并且延迟 500ms 触发8. limitByThe incoming value must be an array, the parameter is {Number}limit, {Number}[offset], limit is the number to display, and offset is the index to start displaying the array.
<div v-for="item in items | limitBy 10"></div> // items 为数组，且只显示数 组中的前十个元素9. filterByThe incoming value must be an array, and the parameter is {String | Function} targetStringOrFunction, that is, the string or function that needs to be matched (the matching result is judged by the return value of the function being true or false); "in" (optional separator) ;{String}[…searchKeys], which is the property area to be retrieved.
<p v-for="name in names | filterBy '1.0'">{{name}}</p> // 检索 items 数组中 值包含 1.0 的元素
<p v-for="item in items | filterBy '1.0' in 'name'">{{ item | json}}</p> // 检索items数组中元素属性name值为1.0的元素输出。检索区域也可以为数组，即in [name, version]，在多个属性中进行检索
输出：
Vue1.0
{"name":"Vue1.0", "version": "1.0"}<p v-for="item in items | filterBy customFilter">{{ item | json}}</p> // 使用自定义的过滤函数，函数可以在选项 methods 中定义
methods : {
customFilter : function(item) {
if(item.name) return true // 检索所有元素中包含 name 属性的元素 }
}10. orderByThe incoming value must be an array, and the parameter is {String|Array|Function}sortKeys, which specifies the sorting strategy. You can use a single key here, or you can pass in an array of multiple sort keys. You can also pass in your own sorting strategy function like Array.Sort(). The second parameter is an optional parameter {String}[order], that is, choose ascending or descending order, order>=0 for ascending order, order<0 for descending order.
The following three different parameter examples are used to illustrate the specific usage:
单个键名:<p v-for="item in items | orderBy 'name' -1">{{item.name}}</p> // items 数组中以键名 name 进行降序排列
多个键名:<p v-for="item in items | orderBy [name,version] ">{{item.name}}</p> // 使用 items 里的两个键名进行排序
自定义排序函数 : <p v-for="item in items | orderBy customOrder">{{item.name}}
</p>
methods: {
customOrder: function (a, b) {
return parseFloat(a.version) > parseFloat(b.version) // 对比item中 version 的值的大小进行排序
} }