欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue filter 过滤器

程序员文章站 2024-02-09 16:03:22
...

过滤器

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:

注:过滤器也可以定义多个过滤器,如:{{ msg | 过滤器1 | 过滤器2}} 可以多次调用过滤器:步骤是按顺序进行,先把msg 交给第一个过滤器 执行,得到结果,然后交给下一个过滤器执行,返回的最终结果渲染到页面相应的位置


过滤器定义语法

Vue.filter(‘过滤器的名称’,fucntion(){})
过滤器中的 function ,第一个参数已经规定死了,永远都是 过滤器 管道符前面 传过来的数据
例如:
Vue.filter(‘过滤器名称’,function(data){
return data + “123”;
})

过滤器调用时候的格式

<!-- 花括号中 -->
{{ message |  dataFormat}}

<!-- 在v-bind 中 -->
<div v-bind:id="dataId | formatId"></div>

全局过滤器

全局过滤器 Vue.filter(‘过滤器名称’,function(){})
function 中第一个参数,必须是过滤器管道符前边的数据,这是 Vue 规定死的,后边也可以跟多参数
接下来通过一个例子来了解一下过滤器

<div id="app">
<p>{{ctime | dataFilter}}</p>
</div>

<script>
//在这给 形参 par1="" 赋空值,也就是在调用过滤器的时候,除了实参赋 "yyyy-mm-dd"以外,其他的都是详细日期输出
Vue.filter('dataFilter',function(dataStr,par1=""){
    // 根据给定的时间字符串,得到特定的时间
 	var dt = new Date(dataStr);
    var y = dt.getFullYear();
    
    // 得到的是0月,所以+1
    var m = (dt.getMonth() + 1).toString().padStart(2,'0');
	
	//.toString.padStart(最大字符串长度值,"要替补的符号或值")
    var d = dt.getDate().toString().padStart(2,'0');
    
    //如果给的实参字符串是yyyy-mm-dd ,输出年月日,否则输出全日期
    if(par1.toLowerCase() === "yyyy-mm-dd"){
    	//模板字符串
    	return `${y}-${m}-${d}`;
    }else{
    	 var hh = dt.getHours().toString().padStart(2,'0');
         var mm = dt.getMinutes().toString().padStart(2,'0');
         var ss = dt.getSeconds().toString().padStart(2,'0');
		 return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
    }
})


var vm = new Vue({
	el:'#app',
	data:{
	ctime:new Date();
	},
	methods:{},
})
</script>

局部过滤器

定义私有过滤器:过滤器有两个条件【过滤器名称 和 处理函数】
filters:{
}

注:过滤器调用的时候,采用的就是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候 优先调用私有过滤器

<div id="app">

//<!-- 如果不给实参,形参pattern 永远是undefined代码报错,这里是给空值;第二种方法是给形参:pattern='' -->

<p>{{ctime | dataFilter("")}}</p>
</div>

<script>
	var vm = new Vue({
		el:'#app',
		data:{
			ctime:new Date();
		},
		methods:{},
		filters:{
			dataFilter:function(dtime,par){
				 var dt = new Date(dtime);
                 var y = dt.getFullYear().toString().padStart(2, '0');
                 var m = (dt.getMonth() + 1).toString().padStart(2, '0');
                 var d = dt.getDate().toString().padStart(2, '0');
                  if (par.toLowerCase() === "yyyy-mm--dd") {
                       return `${y}-${m}-${d}`;
                       
                    } else {
                        var hh = dt.getHours().toString().padStart(2, '0');
                        var mm = dt.getMinutes().toString().padStart(2, '0');
                        var ss = dt.getSeconds().toString().padStart(2, '0');
                        
                        return `${y}-${m}-${d} ${hh}:${mm}:${ss} ***`;
                    }
			}
		}
	})
</script>

ES6中字符串新方法

头部填充或者尾部填充:必须是转成字符串形式

String.prototype.padStart(maxLength,fillString=’ ‘) 或 String.prototype.padEnd(maxLength,fillString=’ ') 来填充字符串;比如:时间不足两位,用 0 补充。
第一个参数表示:填充完字符串总长度是多少
第二个参数表示:用什么来代替
var h=dt.getHours().toString().padStart(2,'0');