Vue.js 是一款流行的前端开发框架，可以极大地提高前端开发效率和代码质量。Vue.js 有很多的扩展，过滤器是其中之一。过滤器可以让我们在模板中使用一些简单的函数来处理数据，非常方便。本文介绍 Vue.js 中常用的几种过滤器，以及它们的使用技巧和示例代码。
1. capitalize
capitalize 可以将字符串的首字母大写。
<p>{{ message | capitalize }}</p>Vue.filter('capitalize', function(value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
});2. currency
currency 可以将数字转化为货币格式。
<p>{{ price | currency }}</p>Vue.filter('currency', function(value) {
if (!value) return '0.00';
value = parseFloat(value);
return '$' + value.toFixed(2);
});3. date
date 可以将时间戳转化为日期格式。
<p>{{ timestamp | date }}</p>Vue.filter('date', function(value) {
if (!value) return '';
var date = new Date(value * 1000);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
return year + '-' + month + '-' + day;
});4. limitBy
limitBy 可以限制显示的数量。
<ul>
<li v-for="item in items | limitBy 10">{{ item }}</li>
</ul>Vue.filter('limitBy', function(value, limit) {
if (!value) return [];
return value.slice(0, limit);
});5. orderBy
orderBy 可以对数组进行排序。
<ul>
<li v-for="item in items | orderBy 'price'">{{ item.name }} {{ item.price }}</li>
</ul>// javascriptcn.com 代码示例
Vue.filter('orderBy', function(value, sortKey) {
if (!value) return [];
return value.sort(function(a, b) {
if (typeof a[sortKey] === 'string') {
return a[sortKey].localeCompare(b[sortKey]);
} else {
return a[sortKey] - b[sortKey];
}
});
});总结
本文介绍了 Vue.js 中常用的五种过滤器：capitalize、currency、date、limitBy、orderBy。通过这些过滤器，我们可以轻松地处理数据，快速地实现页面效果。在使用过程中，应注意保持代码的简洁和可读性，同时还应灵活运用过滤器，根据具体需求进行扩展。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652a0fb87d4982a6ebc6cc62