Vue.js（四）——过滤器

最新推荐文章于 2021-07-29 20:29:47 发布

~时倾

最新推荐文章于 2021-07-29 20:29:47 发布

阅读量95

点赞数

分类专栏： Vue 文章标签：过滤器 vue filter 正则表达式 javascript

本文链接：https://blog.csdn.net/weixin_43866812/article/details/109325226

版权

Vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1、过滤器

概念：Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由管道符指示

全局过滤器

所有的VM实例都可以使用的过滤器

			//定义语法
			//过滤器中的function，第一个参数data是规定死了，永远是管道符前面传递过来的data数据
			//可以有多个参数
			 Vue.filter('过滤器的名称',function(data){	
             
             })

		   //过滤器的调用格式  
            {{ data|过滤器的名称 }}

案例：

	<body>
		<div id="app">
			<p>{{ msg | msgFormat('疯狂') | test }}</p>
		</div>
		
		<script>
			//定义一个全局的过滤器msgFormat
			Vue.filter('msgFormat',function(msg,arg){
				
				//字符串方法replace()第一个参数除了字符串之外还可以定义正则表达式
				return msg.replace(/单纯/g,arg)
			})
			
			Vue.filter('test',function(msg){
				return msg + '+=+=+=+=+=+'
			})
			
			var app = new Vue({
				el: '#app' ,
				
				data: {							
					msg: '曾经我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的人物'	
				},
				methods: {
				
				}
			})
		</script>
	</body>

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，msgFormat 过滤器函数将会收到 msg 的值作为第一个参数。

私有过滤器

（局部过滤器）

过滤器调用的时候有一个就近原则，如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器

<body>
		<div id="app">
			<p>{{ dt|dateFormat }}</p>
			<p> {{msg}} </p>
		</div>
		
		<script>
			var vm2 = new Vue({
							el: '#app',
							data: {
								dt: new Date(),
								msg: "你好"
							},
							filters: {	//定义私有过滤器，过滤器有两个条件【过滤器名称 和 处理函数】
								dateFormat: function(dataStr, pattern=''){
									var dt = new Date(dataStr)
									var y = dt.getFullYear()
									var m = dt.getMonth()+1
									var d = dt.getDate()	
									if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd'){
										
										return `${y}-${m}-${d}`
									}else{
										var hh = dt.getHours()
										var mm = dt.getMinutes()
										var ss = dt.getSeconds()
										return `${y}-${m}-${d} ${hh}:${mm}:${ss} 私有`
									}
								}
							}
						})
		</script>
	</body>

填充字符串

使用ES6的字符串新方法String.prototype.padStart( maxLength, fillString=' ' )
或
String.prototype.padEnd( maxLength, fillString=' ' )来填充字符串

padStart() 用于头部补全， padEnd() 用于尾部补全 。
var hh = dt.getHours().toString().padStart(2,'0')
var mm = dt.getMinutes().toString().padStart(2,'0')
var ss = dt.getSeconds().toString().padStart(2,'0')

~时倾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js（四）——过滤器

1、过滤器概念：Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由管道符指示全局过滤器所有的VM实例都可以使用的过滤器 //定义语法 //过滤器中的function，第一个参数data是规定死了，永远是管道符前面传递过来的data数据 //可以有多个参数 Vue.filter('过滤器的名称',function(data){
复制链接

扫一扫

专栏目录