Vue2过滤器filter使用及注意
未可知。 人气:0Vue2中的过滤器是什么
什么是vue的过滤器
过滤器可以通俗理解成是一个特殊的方法,用来加工数据的
比如枚举值可以使用过滤器:如 1 2 3 4 对应 成功 失败 进行中 已退回 比如价格后面跟个过滤器,将价格格式化成小数点两位 比如时间格式化等,又比如可以过滤聊天中的某些脏话
过滤器怎么写
<div id="app"> <h3>过滤器基本使用</h3> // <!--在双花括号中使用全局过滤器 格式:{{值 | 过滤器的名称}}--> <p> {{content|contentFilter}} </p> // <!--在v-bind中使用全局过滤器 格式:v-bind:id="值 | 过滤器的名称"--> <p v-bind:id="1 | addZero">11</p> <h3>过滤器接收参数</h3> <p> {{ num1| add(num2,num3)}} </p> </div>
Vue.filter('contentFilter', function (value) { //全局过滤器 if (!value) { return "" } return value.toUpperCase().replace('TMD', '*不许说脏话噢*').replace('SB', '*不许说脏话噢*') }) Vue.filter("addZero",function(value){ // 如果value的值小于10则在前面添加0然后返回,否则直接返回value值 return value<10?"0"+value:value; }); new Vue({ el: '#app', data: { content: '小伙子,TMD就是个sb', num1: 40, num2: 60, num3: 70, }, filters: { //局部过滤器(本地过滤器) add(n1, n2, n3) { return n1 + n2 + n3 } } })
注意:当全局过滤器和局部过滤器重名时,会采用局部过滤器
局部过滤器优先于全局过滤器被调用
一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右
注意filter方法在vue3中已被废除
vue3要精简代码,并且filter功能重复,filter能实现的功能,methods和计算属性基本上也可以实现。把filter这方面的vue源码给删掉,这样更加方便维护。
例如
使用computed实现
<template> <div id="app"> <ul v-for="(item, index) in arr" :key="index"> <li>快递公司:{{ item.deliverCompany }}</li> <!-- 使用计算属性 --> <li>运输状态:{{ computedText(item.expressState) }}</li> </ul> </div> </template> <script> export default { data() { return { arr: [ { deliverCompany: "京东快递", expressState: "1", }, { deliverCompany: "顺丰快递", expressState: "2", }, { deliverCompany: "中通快递", expressState: "3", }, { deliverCompany: "邮政快递", expressState: "4", }, { deliverCompany: "极兔快递", expressState: "5", }, { deliverCompany: "某某快递", expressState: null, }, ], }; }, computed: { computedText() { // 计算属性要return一个函数接收参数 return function (state) { switch (state) { case "1": return "待发货"; break; case "2": return "已发货"; break; case "3": return "运输中"; break; case "4": return "派件中"; break; case "5": return "已收货"; break; default: return "快递信息丢失"; break; } }; }, }, }; </script>
使用methods实现
<template> <div id="app"> <ul v-for="(item, index) in arr" :key="index"> <li>快递公司:{{ item.deliverCompany }}</li> <!-- 使用方法 --> <li>运输状态:{{ methodsText(item.expressState) }}</li> </ul> </div> </template> <script> export default { data() { return { arr: [ { deliverCompany: "京东快递", expressState: "1", }, { deliverCompany: "顺丰快递", expressState: "2", }, { deliverCompany: "中通快递", expressState: "3", }, { deliverCompany: "邮政快递", expressState: "4", }, { deliverCompany: "极兔快递", expressState: "5", }, { deliverCompany: "某某快递", expressState: null, }, ], }; }, methods: { methodsText(state) { switch (state) { case "1": return "待发货"; break; case "2": return "已发货"; break; case "3": return "运输中"; break; case "4": return "派件中"; break; case "5": return "已收货"; break; default: return "快递信息丢失"; break; } }, }, }; </script>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容