Vue过滤器基本使用

分类：vue教程时间：2020-12-29 20:58:54

Vue是允许我们自定义过滤器，可被用于一些常见的文本格式化处理等，Vue过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (从 2.1.0+ 开始支持)，Vue过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

Vue过滤器基本使用

看例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue过滤器</title>
	</head>
	<body>
    <div id='app'>
        <h1>{{msg | filterName}}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var vm=new Vue({
        el:'#app',
        data:{
          msg:'1'     
        },
        filters: {
          filterName(val) {
            const filterNameMap = {
              '0': '待确认',
              '1': '待发货',
              '2': '待收货',
              '3': '待付款',
              '4': '待收款',
              '5': '已完成'
            }
            return filterNameMap[val]
          }
        }        
      })
    </script>
  </body>
</html>

页面显示：

除注明外的文章,均为来源:老汤博客,转载请保留本文地址！
原文地址：https://tangjiusheng.com/vue/204.html

关注下头条号后，请私信将免费分享给你一份web前端资料！
立即关注

大家都在看