zoukankan      html  css  js  c++  java
  • vue 中的通过搜索框进行数据过滤的过程

     1 <template>
     2  <div>
     3     <input type="text" v-model="searchId" placeholder="搜索">
     4     <table class="tab">
     5       <tr>
     6         <th>序号</th>
     7         <th>名字</th>
     8         <th>时间</th>
     9         <th>操作</th>
    10       </tr>
    11       <tr v-for="(item,index) in newlist" :key="index">
    12         <td>{{item.id}}</td>
    13         <td>{{item.name}}</td>
    14         <td>{{item.ctime}}</td>
    15         <td><a href="#" @click="dele(index)">删除{{index}}</a></td>
    16       </tr>
    17    <!-- <tr v-if="list.length===0"><td colspan="4">已经没有数据了,请添加数据吧 123</td></tr> -->
    18     </table> 
    19  </div>
    20 </template>
    21 
    22 <script>
    23  export default {
    24    data () {
    25      return {
    26         searchId:"",
    27         list:[
    28          {id:1,name:"cc",ctime:new Date()},
    29          {id:2,name:"zs",ctime:new Date()},
    30          {id:3,name:"ss",ctime:new Date()}
    31        ],
    32      }
    33    },
    34    computed:{
    35        newlist(){
    36     //1. 常规做法
    37     //     var that=this
    38     //     function iscontainer(value){
    39     //       return  value.name.indexOf(that.searchId)!==-1
    40     //     }
    41     //     var temlist=this.list.filter(iscontainer)
    42     // iscontainer是一个函数,value就是list中的每一项的值,通过判断是否包含来来过滤数据内容
    43     //     return temlist
    44     //    }
    45     //2.es6做法
    46         return this.list.filter(value=>value.name.indexOf(this.searchId)!==-1)  
    47 
    48         }
    49    }
    50 }
    51 </script>
    52 
    53 <style>
    54 
    55  
    56 </style>
  • 相关阅读:
    C++笔记(2018/2/6)
    2017级面向对象程序设计寒假作业1
    谁是你的潜在朋友
    A1095 Cars on Campus (30)(30 分)
    A1083 List Grades (25)(25 分)
    A1075 PAT Judge (25)(25 分)
    A1012 The Best Rank (25)(25 分)
    1009 说反话 (20)(20 分)
    A1055 The World's Richest(25 分)
    A1025 PAT Ranking (25)(25 分)
  • 原文地址:https://www.cnblogs.com/liweiz/p/10557832.html
Copyright © 2011-2022 走看看