码迷,mamicode.com
首页 > 其他好文 > 详细

Vue中,过滤器的使用方法!

时间:2019-09-21 21:33:11      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:前端学习   允许   bin   全局   组件   技术   das   过滤器   uppercase   

        Vue.js允许自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示;(借官方的来介绍下,接下来直奔主题)

 

1、定义全局过滤器!任何组件都能用。

main.js中定义全局过滤器

//  定义长度为10的过滤器
Vue.filter(‘length10‘,(e) =>{
  return e.slice(0,10) + ‘...‘
})
//  定义转大小写的过滤器
Vue.filter(‘toUpperCase‘,(e)=>{
 return  e.toUpperCase()
})

app.vue使用

// template
  <div>{{str}}</div>
  <div>{{str | length10}}</div>
  <div>{{str1 | length10 | toUpperCase}}</div>
  
//  script
data(){
    return {
      str:‘公众号“前端伪大叔”,欢迎大家前来关注!‘,
      str1:‘qianduanweidashu‘
    }
  }

总结:过滤器使用方法是‘|’直接使用,可以使用多个过滤器

技术图片

 

2、过滤器传参,了解一下 /笑哭

main.js

Vue.filter(‘Biography‘,(e,str1) =>{
     return e.slice(0,str1) + ‘...‘
}

App.vue

//  template
<div>{{str | Biography(9)}}</div>
//  script
 data(){
    return {
      str:‘公众号“前端伪大叔”,欢迎大家前来关注!‘,
    }
  }

技术图片

 

3、组件内过滤器

组件内过滤器,需要定义在filtets这个对象中,对象中定义的都是方法;

//  template
  <div>{{str | length(9) }}</div>
  <div>{{str1 | length(9) | toUpperCase}}</div>
  
//  script
 data() {
    return {
      str: "公众号“前端伪大叔”,欢迎大家前来关注!",
      str1:‘qianduanweidashu‘
    };
  },
//  这里filters是这个对象
  filters: {
//  自行输入长度
    length(e, num) {
      return e.slice(0, num) + "...";
    },
//  转为大写
    toUpperCase(e) {
      return e.toUpperCase();
    }
  }

总结:filters是局部过滤器,只能在组件内使用;和全局过滤器一样可以传参,使用同时多个过滤器;

 技术图片

 

 如果大家喜欢的话,欢迎关注“前端伪大叔”我将为您不间断的分享前端学习知识!

技术图片

 

Vue中,过滤器的使用方法!

标签:前端学习   允许   bin   全局   组件   技术   das   过滤器   uppercase   

原文地址:https://www.cnblogs.com/webfy/p/11564467.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!