过滤器

过滤器

1. 作用：就是对已经的数据进行格式化

2. 使用格式

   • 已有数据 | 过滤器名称(arg1,arg2)

   • 分为局部定义和全局定义

   • <img 
           :src = "item.img | imgFilter "
           οnerrοr="this.style.visibility='hidden'"
           >
     

     全局定义
     // Vue.filter('imgFilter',function ( val ) {
       //   //val就是需要格式化的数据
       //   // console.log('val',val)
       //   return val.replace( 'w.h', '128.180')
       // })
     
       new Vue({
         el: '#app',
         data: {
           lists: []
         },
         filters: { // 局部定义
           // 过滤器名称：function () {}
           'imgFilter': function ( val ) {
             return val.replace( 'w.h', '128.180')
           }
         },
         methods: {
           getList () {
             fetch('./data/list.json')
               .then( res => res.json())
               .then( data => {
                 this.lists = data.movieList
               })
               .catch( error => console.log( error ))
           }
         }
       })