Vue 的 过滤器(Filters) 允许你在模板中对数据进行格式化或转换,而不需要在计算属性或方法中进行处理。它们通常用于格式化显示的内容(如日期、货币、文本大小等),使得模板代码更简洁。
<template>
<div id="app">
<ul>
<li v-for="item in info" :key="item.name">
<p>{{ item.name }}</p>
<p>{{ item.price | price }}</p>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
info: [
{
name: "apple",
num: 4,
price: 99,
},
{
name: "banana",
num: 14,
price: 199,
},
],
};
},
filters: {
price(value) {
return `${value} 元`;
},
},
};
</script>
<style></style>
效果如图
前端从后端获取数据,例如多少钱,要把钱加上货币符号,或者单位。
filters: {
price(value) {
return `${value} 元`;
},
},
过滤器与data同级,写在export default下,price是过滤器名称,(value)是传递参数,把处理的数据传进来,就写value,最后用插值表达式写出来
插值表达式{{目标值|过滤器名称}}