vue使用过滤器filters

最新推荐文章于 2023-03-16 10:54:11 发布

weixin_43795169

最新推荐文章于 2023-03-16 10:54:11 发布

阅读量322

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_43795169/article/details/104779667

版权

Vue 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了Vue.js中过滤器的使用方法，包括如何在双花括号插值和v-bind表达式中应用过滤器，以及如何自定义过滤器函数。同时，还展示了如何使用v-html结合过滤器处理文本数据，将英文标点转换为中文标点，适用于处理复杂的文本格式需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、filter的使用

<div>
		<!--过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)-->
		<div>{{ num | numFilter }}</div>   
		<!-- numFilter 过滤器函数将会收到 num 的值作为第一个参数-->
		
		<div :id="num1 | idFilter"></div>
		
		<div>{{ num | numberFilter(num1, num2) }}</div>
		<!--numberFilter 被定义为接收三个参数的过滤器函数。其中 number 的值作为第一个参数，num1 的值作为第二个参数，num2的值作为第三个参数。-->
	</div>

export default{
		data(){
			return{
				num:1.123, num1:1, num2:1,
			}
		},
		filters:{
			numFilter:function(val){
				if (!val) return ''
				val=Number(val).toFixed(2);
				return val       //console.log(val)  1.12
			},
			idFilter:function(val){
				if (!val) return ''
				val=`index-${val}`;
				return val   //console.log(val)  index-1
			},
			numberFilter:function(val1,val2,val3){
				return val1+val2+val3   //console.log(val1+val2+val3)  3.123
			}
		},
	}

2、v-html 使用过滤器filters
例：将后台返回的文本数据中的英文标点都变成中文标点符号
（1）

<p v-html="$options.filters.repSign(sub_title)">{{sub_title}}</p>

（2）

	filters: {
			 interchange(str) {
				if(str== '' || str == null) {
					return str
				} else {
					str = str.replace(/([\u4E00-\u9FA5]|^|\n|\r)([\,\.\?\!\:\;])(?=[\u4E00-\u9FA5]|$|\n|\r)/g, function(u, v, w, x) {
						var sign = {
							',': '，',
							'.': '。',
							'?': '？',
							'!': '！',
							':': '：',
							';': '；'
						};
						return sign[w] ? v + sign[w] : u;
					});
					return str;
				}
			},