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

最新推荐文章于 2022-07-06 16:02:09 发布

BlankTheMemory

最新推荐文章于 2022-07-06 16:02:09 发布

阅读量1.5k

点赞数

分类专栏： Vue学习历程文章标签： vue.js

本文链接：https://blog.csdn.net/BlankTheMemory/article/details/107367161

版权

Vue学习历程专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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>

BlankTheMemory

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
在Vue中过滤器filter的使用(有参+无参)，过滤器转变大小写字母，过滤器切割字符串

菜鸟的我今天又被大佬嫌弃了，唉，抓紧时间学习吧，干啥啥不行，吃饭第一名。Vue里过滤器的使用，首先是无参的，这个比较简单，在new出来的Vue里直接添加filter就可以了，用来实现大小写字母的转换操作，附上脚本的代码。<script> window.onload = () =>{ let mao = new Vue({ el:'#mao', data:{ msg:'' }, methods:{
复制链接

扫一扫

专栏目录