Vue 过滤器

过滤器

目录

• 过滤器
  • 1.过滤器的作用是什么？
  • 2. 自定义过滤器
  • 3. 过滤器的使用
  • 4. 局部过滤器
  • 5. 带参数的过滤器
• 基本使用

---

1.过滤器的作用是什么？

  格式化数字，比如将字母格式化大写，日期格式化等

2. 自定义过滤器

Vue.filter(‘过滤器名称’, function(value){ 
     // 过滤器业务逻辑 
})

3. 过滤器的使用

<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div v-bind:id=“id | formatId"></div>
<div>{{date | format(‘yyyy-MM-dd')}}</div>

4. 局部过滤器

filters:{
   capitalize: function(){}
}

5. 带参数的过滤器

Vue.filter(‘format’, function(value, arg1){
     // value就是过滤器传递过来的参数
 })

基本使用

  <div id="app">
    <input type="text" v-model='msg'>
    <div>{{msg | upper}}</div>
    <div>{{msg | upper | lower}}</div>
    <div :abc='msg | upper'>测试数据</div>
  </div>

 <script type="text/javascript">
    /*
      过滤器
      1、可以用与插值表达式和属性绑定
      2、支持级联操作
    */
    // Vue.filter('upper', function(val) {
    //   return val.charAt(0).toUpperCase() + val.slice(1);
    // });
    Vue.filter('lower', function(val) {
      return val.charAt(0).toLowerCase() + val.slice(1);
    });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: ''
      },
      filters: {
        upper: function(val) {
          return val.charAt(0).toUpperCase() + val.slice(1);
        }
      }
    });
  </script>