vue.js是前端开发中备受欢迎的框架，它提供了许多实用的功能，其中过滤器是其重要的特性之一。
过滤器（Filter）是Vue.js提供的一种数据处理工具，可以对模板中的数据进行过滤和格式化输出，以便更为适合页面展示。使用Vue.js的过滤器功能，开发者可以很方便的在模板中使用一些高级的文本转换和格式化功能。下面将会介绍几种常用的Vue.js过滤器。
1. capitalize
将字符串第一个字符转变为大写。
<p>{{ message | capitalize }}</p><script>
Vue.filter('capitalize', function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
el: '#app',
data: {
message: 'welcome to vue.js'
}
})
</script>2. currency
将数字转换为带有货币符号的格式。
立即学习“前端免费学习笔记（深入）”；
<p>{{ price | currency }}</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/9272" title="极品模板多语言企业网站管理系统1.2.2"><img
src="https://img.php.cn/upload/webcode/000/000/002/175852080266320.jpg" alt="极品模板多语言企业网站管理系统1.2.2" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/9272" title="极品模板多语言企业网站管理系统1.2.2">极品模板多语言企业网站管理系统1.2.2</a>
<p>【极品模板】出品的一款功能强大、安全性高、调用简单、扩展灵活的响应式多语言企业网站管理系统。 产品主要功能如下： 01、支持多语言扩展（独立内容表，可一键复制中文版数据） 02、支持一键修改后台路径； 03、杜绝常见弱口令，内置多种参数过滤、有效防范常见XSS； 04、支持文件分片上传功能，实现大文件轻松上传； 05、支持一键获取微信公众号文章（保存文章的图片到本地服务器）； 06、支持一键</p>
</div>
<a href="/xiazai/code/9272" title="极品模板多语言企业网站管理系统1.2.2" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><script>
Vue.filter('currency', function (value, currency) {
var digitsRE = /(d{3})(?=d)/g
value = parseFloat(value)
if (!isFinite(value) || (!value && value !== 0)) return ''
currency = currency != null ? currency : '$'
var stringified = Math.abs(value).toFixed(2)
var _int = stringified.slice(0, -3)
var i = _int.length % 3
var head = i > 0
? (_int.slice(0, i) + (_int.length > 3 ? ',' : ''))
: ''
var _float = stringified.slice(-3)
var sign = value < 0 ? '-' : ''
return sign + currency + head +
_int.slice(i).replace(digitsRE, '$1,') +
_float
})
new Vue({
el: '#app',
data: {
price: 12345.6789
}
})
</script>3. filterBy
筛选数组或对象。
<div class="list-item" v-for="(item, index) in list | filterBy search">{{ item.name }}</div>
<input type="text" v-model="search"><script>
new Vue({
el: '#app',
data: {
search: '',
list: [
{ name: 'apple', type: 'fruit'},
{ name: 'banana', type: 'fruit' },
{ name: 'pear', type: 'fruit' },
{ name: 'carrot', type: 'vegetable'}
]
},
})
</script>4. orderBy
对数组或对象进行排序。
<table>
<tr v-for="item in list | orderBy 'score' -1">
<td>{{ item.name }}</td>
<td>{{ item.score }}</td>
</tr>
</table><script>
new Vue({
el: '#app',
data: {
list: [
{ name: 'apple', score: 90},
{ name: 'banana', score: 60 },
{ name: 'pear', score: 80 },
{ name: 'carrot', score: 70}
]
},
})
</script>5. date
将日期格式化输出。
<p>{{ date | date('YYYY-MM-DD') }}</p><script>
Vue.filter('date', function (value, format) {
if (!value) return ''
format = format || 'YYYY-MM-DD'
return moment(value).format(format)
})
new Vue({
el: '#app',
data: {
date: '2021-08-16'
},
})
</script>以上是常用的几种Vue.js过滤器，通过这些过滤器我们可以很方便的实现文本格式化等高级功能，提高了页面展示的效果和用户体验。
