十二、filter

filters

过滤器一般用于文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind表达式

<!-- 在双花括号差值 -->
{{ msg | capitalize }}

<!-- 在v-bind -->
<div v-bind:id="rawId | formatId"></div>
filters的简单例子:首字母大写以及保留两位小数
<body>
  <div id="app">
    <!-- 这里代表用后面的方法处理前面的值 -->
    {{name | firstToUpperCase}}
    
    <!-- 不作处理的sum:0.30000000000000004 -->
    <!-- 使用filter实现保留两位小数 -->
    {{sum | toFix}}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          name: 'leo',
          x: 0.1,
          y: 0.2
        }
      },
      // filter好用,但是不能滥用,一般用来格式化一些字符串
      filters: {
        // 方法接收一个参数,这个参数就是使用方法时前面的值,这样就可以在方法里处理值,并返回
        
        // 首字母大写
        firstToUpperCase(val) {
          return val.slice(0,1).toUpperCase() + val.slice(1)
        },
        
        // 保留两位小数
        toFix(val) {
          return val.toFixed(2)
        }
      },
      computed: {
        sum() {
          return this.x + this.y
        }
      }
    })
  </script>
</body>
filters实际的应用场景

比如订单的状态

<body>
  <div id="app">
    {{orderStatus | formOrderStatus}}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          // 假设这个值是后端返回的的数据
          orderStatus: '002'
        }
      },
      filters: {
        formOrderStatus(val) {
          // 这里是和后端约定的好不同的值代表不同状态
          const orderStatusMap = {
            '001': '未付款',
            '002': '已付款',
            '003': '已发货',
            '004': '已签收',
            '005': '已评价',
          }
          return orderStatusMap[val]
        }
      }
    })
  </script>
</body>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值