Vue过滤器基本使用

 分类:vue教程时间:2020-12-29点击:

      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>  	

页面显示:

clipboard.png

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: