微客导航 » 文章资讯 » vue2 v-model/v-text 中使用过滤器的方法示例

vue2 v-model/v-text 中使用过滤器的方法示例

2023-08-23 17:05:04 341

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


{{message|capitalize}}

可以在一个组件的选项中定义私有的过滤器：

filters:{
dateFormat：(dataStr)=>{
vartime=newDate(dataStr);

functiontimeAdd0(str){
if(str<10){
str='0'+str;
}
returnstr
}
vary=time.getFullYear();
varm=time.getMonth()+1;
vard=time.getDate();
varh=time.getHours();
varmm=time.getMinutes();
vars=time.getSeconds();
returny+'-'+timeAdd0(m)+'-'+timeAdd0(d)+''+timeAdd0(h)+':'+timeAdd0(mm)+':'+timeAdd0(s);
}
}

或者在创建Vue实例之前全局定义过滤器：

Vue.filter('dateFormat',(dataStr)=>{
vartime=newDate(dataStr);

functiontimeAdd0(str){
if(str<10){
str='0'+str;
}
returnstr
}
vary=time.getFullYear();
varm=time.getMonth()+1;
vard=time.getDate();
varh=time.getHours();
varmm=time.getMinutes();
vars=time.getSeconds();
returny+'-'+timeAdd0(m)+'-'+timeAdd0(d)+''+timeAdd0(h)+':'+timeAdd0(mm)+':'+timeAdd0(s);
})

但是如果想要在v-model或者v-text中使用过滤器是不生效的，可以参考以下写法：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue2 v-model/v-text 中使用过滤器的方法示例

热门推荐

随机推荐