Vue的过滤器(filter)

过滤器的使用

上庸者-不服周

8525人浏览 · 2022-06-28 17:27:30

上庸者-不服周 · 2022-06-28 17:27:30 发布

在Vue.js中，过滤器主要用于文本的格式化，或者数组数据的过滤与排序等。从Vue.js2.0.0版本开始，内置的过滤器被删除了，如果使用过滤器，需要自己编写。过滤器可以用在两个地方：双花括号插值和v-bind表达式，使用时通过管道符（ | ）添加到表达式的尾部使用。

过滤器本质是一个函数。Vue中的过滤器分为两种：局部过滤器和全局过滤器

一、全局过滤器：使用Vue.filter()方法来注册，该方法接收两个参数，第一个参数是过滤器的ID（即名字）,第二个参数是一个函数对象，过滤器要实现的功能在这个函数中定义。语法形式如下：

Vue.filter（id,[definition]）

示例：

<div id="app">
    <input type="text" v-model="message">
    {{ message | capitalize }}
</div>
<script>
     Vue.filter('capitalize', function (value) {
          if (!value) return ''
          value = value.toString()
          return value.toUpperCase();
     })
     new Vue({
         el:'#app',
         data:{
           message:'java'
         }
     })
</script>

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。

二、局部过滤器：是在Vue实例的选项对象中使用filters选项来注册

例如：

<div id="app">
     <input type="text" v-model="message">
     {{ message | capitalize }}
</div>
<script>
new Vue({
       el:'#app',
       data:{
           message:'java'
       },
       filters:{
           capitalize:function (value) {
              if (!value) return ''
              value = value.toString()
              return value.toUpperCase();
            }
         }
    })
</script>

三、过滤器的串联：

1、{{ message | filterA | filterB }}

filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

2、过滤器是 JavaScript 函数，因此可以接收参数：

{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

四、综合示例

<style>
    div{
        width: 850px;
        margin: 50px auto;
    }
</style>
<div id="app">
       <h2 style="text-align: center;">过滤器应用举例</h2>
       <div>
        <label>
            ID：
            <input type="text" placeholder="请输入编号" v-model="id" v-bind:disabled="id_flag">
        </label>
        <label>
            Name：
            <input type="text" placeholder="请输入名称" v-model="name">
        </label>
        <label>
            Delivery Time:
            <input  type="datetime-local" v-model="ctime"/>
        </label>
        <button @click="add" v-bind:disabled="add_flag">Add</button>
        <button v-bind:disabled="edit_flag" @click="edit_option">Edit</button>
        <br><br>
        <label>
            请输入搜索关键字：
            <input type="text" placeholder="请输入搜索关键字" v-model="keyword">
        </label>
        <button @click="search(keyword)">Search</button>
       </div>
       <table border="1">
           <thead>
               <tr>
                   <th width="100">编号</th>
                   <th width="200">名称</th>
                   <th width="300">出厂时间</th>
                   <th width="200">操作</th>
               </tr>
           </thead>
           <tbody>
               <tr  v-for="(item,index) in search(keyword)" :key="item.id" align="center">
                   <td>{{ item.id }}</td>
                   <td>{{ item.name }}</td>
                   <td>{{ item.ctime | dateFormat }}</td>
                   <td>
                       <a href="#" @click.prevent="edit(item)">{{ item.options[0] }}</a>
                       &nbsp;&nbsp;&nbsp;
                       <a href="#" @click.prevent="del(index)">{{ item.options[1] }}</a>
                   </td>
               </tr>
           </tbody>
       </table>
   </div>
   <script>
       new Vue({
           el: '#app',
           data: {
               id: '',
               name: '',
               ctime: new Date(),
               keyword: '',
               id_flag: false, //id框可用
               add_flag: false,//add按钮可用
               edit_flag: true, //edit按钮不可用
               list: [
                   { id:1001,name:'宝马520',ctime:new Date(),options:['Edit','Delete'] },
                   { id:1002,name:'宝马730',ctime:new Date(),options:['Edit','Delete'] },
                   { id:1003,name:'宝马X5',ctime:new Date(),options:['Edit','Delete'] },
                   { id:1004,name:'奔驰s350',ctime:new Date(),options:['Edit','Delete'] },
                   { id:1005,name:'奔驰s450',ctime:new Date(),options:['Edit','Delete'] },
                   { id:1006,name:'红旗L5',ctime:new Date(),options:['Edit','Delete'] },
                   { id:1007,name:'红旗L7',ctime:new Date(),options:['Edit','Delete'] },
                   { id:1008,name:'红旗X90',ctime:new Date(),options:['Edit','Delete'] }
               ]
           },
           filters: { //局部过滤器
            dateFormat: function(d){
                let date = new Date(d);
                let dy = date.getFullYear();
                let dm = date.getMonth()+1;
                dm = dm>=10?dm:'0'+dm;
                let dd = date.getDate();
                dd = dd>=10?dd:'0'+dd
                let h = date.getHours();
                h = h>=10?h:'0'+h
                let m = date.getMinutes();
                m = m>=10?m:'0'+m
                let s = date.getSeconds();
                s = s>=10?s:'0'+s

                return `${dy}-${dm}-${dd}T${h}:${m}:${s}`
            }
           },
           methods:{
               add(){
                   let temp_id = this.id;
                   let temp_name = this.name;
                   let temp_date = this.ctime;
                   this.list.push({
                       id: temp_id,
                       name: temp_name,
                       ctime: temp_date,
                       options:['Edit','Delete']
                   });
                   this.id = '';
                   this.name = '';
                   this.ctime = '';
               },
               edit(item){
                   this.add_flag = true; //add按钮不可用
                   this.edit_flag = false; //edit按钮可用
                   this.id = item.id;
                   this.name = item.name
                   this.ctime = this.$options.filters.dateFormat(item.ctime);
                   this.id_flag = true //id框不可用
               },
               edit_option(){
                  let arr = this.list.filter(temp=>{ //查找需要编辑的元素
                      return temp.id === this.id
                  })
                  arr[0].name = this.name
                  arr[0].ctime = this.ctime
                  this.list = this.list.map(item=>{ //替换元素
                        return item.id === arr[0].id?arr[0]:item
                  })
                  this.id_flag = false //id框可用
                  this.add_flag = false //add按钮可用
                  this.edit_flag = true //edit按钮不可用
                  this.id=''
                  this.name=''
                  this.ctime = ''
               },
               del(index){
                   this.list.splice(index,1)
               },
               search(name){
                      var arr=[];
                      this.list.forEach((item,i)=>{
                        if(item.name.indexOf(name)!=-1){
                          arr.push(item);
                        }
                      });
                      return arr
               }
           }
       })
   </script>