filter过滤器
1. 作用
转换格式, 把变量或者表达式转换出来 -
2. 语法:
{
{
表达式 | 方法名 }}
3. 代码示例
<template>
<div>
<h1>价格: {
{ price }}</h1>
<h1>{
{ price | rmb }}</h1>
<h1>{
{ price | dollar }}</h1>
<h1>{
{ price | oy }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
price: 100,
};
},
// filters
filters: {
// 过滤器声明为方法
rmb(value) {
// 方法需要返回一个值
return "￥" + value;
},
oy(val) {
return "€" + val;
},
},
methods: {
},
};
</script>
<style></style>
4. 过滤器带参数使用方式
- 语法:
{
{
表达式 | 过滤器(声明参数)}}
<template>
<div>
<h1>{
{ money | rmb("$") }}</h1>
<h1>{
{ money | rmb("￥") }}</h1>
<h1>{
{ message | reverse | upper }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
money: 100,
message: "abcdefg",
};
},
filters: {
rmb(value, unit) {
return unit + value;
},
reverse(value) {
return value.split("").reverse().join("");
},
upper(value) {
return value.toUpperCase();
},
},
methods: {
},
};
</script>
<style></style>