在Vue中过滤器filter的使用(有参+无参)，过滤器转变大小写字母，过滤器切割字符串

关注

原创最新推荐文章于 2026-08-04 10:58:28 发布 1.6k 阅读 AI 写同款· GEO 优化 ›

大疆智图生成的3Dtiles模型，如何在Cesium里正确加载并叠加到天地图上？本文详细介绍了如何将大疆智图生成的3Dtiles模型精准加载到Cesium中并与天地图集成。从数据输出前的关键设置、Cesium场景搭建、坐标校正技术到常见问题解决方案，提供了一套完整的实战指南，帮助用户解决坐标偏移、层级显示等核心问题，实现高效的三维可视化展示。阅读详情

菜鸟的我今天又被大佬嫌弃了，唉，抓紧时间学习吧，干啥啥不行，吃饭第一名。

Vue里过滤器的使用，首先是无参的，这个比较简单，在new出来的Vue里直接添加filter就可以了，用来实现大小写字母的转换操作，附上脚本的代码。

<script>
			window.onload = () =>{
				
				let mao = new Vue({
					el:'#mao',
					data:{
						msg:''
					},
					methods:{
						
					},
					/*过滤器在这里设置，转换大小写*/
					filters:{
						UpperCase(value){
							if(!value){
								return '';
							}
							return value.toString().toUpperCase();
						}
					}
				});
			}
		</script>

今天还学习了一种带参数的过滤器，也就是全局过滤器，主要就是Vue.filter(key,方法())，切割字符串，索引位置（0，3）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-filter</title>
		<!--引入vue.js-->
		<script type="text/javascript" src="../js/vue.js"></script>
		<script>
			
			/*全局的过滤器配置在这里，过滤器参数里包含了key和一个方法，
			 方法中又包含了三个参数，反别是默认的值，第二个是开始索引，第三个是结束索引
			 所以这个方法会截取字符串中的前三个字母*/
			Vue.filter('strSplit',function(value,start,end){
				if(!value){
					return '';				
				}
				return value.toString().slice(start,end);
			});
			window.onload = () =>{
				
				let mao = new Vue({
					el:'#mao',
					data:{
						msg:'',
						message:''
					},
					methods:{
						
					},
					/*过滤器在这里设置*/
					filters:{
						UpperCase(value){
							if(!value){
								return '';
							}
							return value.toString().toUpperCase();
						}
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="mao">
			<input type="text" v-model="msg" /><br />
			<!--使用方法在这里-->
			把小写字母转换成大写字母：{{msg | UpperCase}}
			
			<input type="text" v-model="message" /><br />
			字符串截取:{{message | strSplit(0,3)}}
		</div>
	</body>
</html>