Vue filter 过滤器
文章目录
过滤器
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')
;
上一篇: 软件构造lab6
下一篇: 软件构造习题课6-6心得