首页 > 其他 > 详细

【VUE】过滤器的使用,管道符号' | '

时间:2021-03-16 12:10:43      阅读:52      评论:0      收藏:0      [点我收藏+]

1.vue过滤器的使用,常用于多文本数据的格式化

<!-- 在双花括号中 -->
{{ message | capitalize }}
{{ 数据 | 过滤器 }}
  • 过滤器函数接收表达式的值 (之前的操作链的结果) 作为第一个参数

  • 过滤器可以传递参数

{{ message | filter(type1, type2) }}

message将作为第一个参数传递给过滤器,type1, type2,依次作为第二个 第三个参数
  • 过滤器可以串联

{{ message | filterA | filterB }}

message的返回传入filterA, 处理结果作为参数继续传入filterB 

2.vue实例

  • 金额的格式化:保留两位0
 1 let formatMoney = (value, type) => {
 2   let moneyStr = ‘‘;
 3   if (value) {
 4     value = parseFloat(value).toFixed(2).split(‘.‘);
 5   } else {
 6     value = [‘0‘, ‘00‘]
 7   }
 8   if (type === ‘integer‘) {
 9     moneyStr = ‘¥ ‘ + value[0];
10   } else if (type === ‘float‘) {
11     moneyStr = value[1];
12   } else if (type === ‘noIcon‘) {
13     moneyStr = value[0] + ‘.‘ + value[1];
14   } else {
15     moneyStr = ‘¥ ‘ + value[0] + ‘.‘ + value[1];
16   }
17   return moneyStr;
18 }
  • 数据处理,有数据取数据,没有‘--‘展示
1 let filter = (value) => {
2   let flag;
3   flag = !value ? ‘--‘ : value
4   return flag
5 }
  • 从js文件中将两个过滤器暴露出去
1 export default {
2   filter,
3   formatMoney
4 }
  • 在main.js中引入:
import filter from ‘./filters/index‘;
  • 使用:

  获取到数据unitmount,作为参数传给filter ----> 有值就使用原来的值,没有的话展示为空  ----->  处理后的数据继续格式化,保留两位0

1             <el-table-column
2               prop="unitamount"
3               min-width="150px"
4               label="保险金额(元)"
5               align="right">
6               <template slot-scope="scope">
7                 <span>{{ scope.row.unitamount | filter  | formatMoney(‘noIcon‘) }}</span>
8               </template>
9             </el-table-column>

 

【VUE】过滤器的使用,管道符号' | '

原文:https://www.cnblogs.com/xingnizhiren/p/14542493.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!