十二、filter

filters

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


{{ msg | capitalize }}


<div v-bind:id="rawId | formatId">div>

filters的简单例子:首字母大写以及保留两位小数

<body>
  <div id="app">
    
    {{name | firstToUpperCase}}
    
    
    
    {{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>

你可能感兴趣的:(vue,过滤器,filter)