十二、filter

最新推荐文章于 2022-06-30 08:15:23 发布

weixin_43791795

最新推荐文章于 2022-06-30 08:15:23 发布

阅读量101

点赞数

分类专栏： vue 文章标签：过滤器 filter

本文链接：https://blog.csdn.net/weixin_43791795/article/details/102944552

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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>

weixin_43791795

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十二、filter

filters过滤器一般用于文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式{{ msg | capitalize }}<div v-bind:id="rawId | formatId"></div>filters的简单例子：首字母大写以及保留两位小数...
复制链接

扫一扫