本文實例為大家分享了vue實現搜索過濾效果的具體代碼，供大家參考，具體內容如下

html：

<table id="tfhover_1" class="tftable_1" border="1">  <tr>    <th>名稱</th>    <th>鏈接狀態</th>    <th>IP</th>    <th>特例類型</th>    <th>所屬城市</th>    <th>所屬機房</th>  </tr>  <tr v-cloak v-for="(item, index) of slist">    <td>{{item.name}}</td>    <td>{{item.username}}</td>    <td>{{item.email}}</td>    <td>{{item.sex}}</td>    <td>{{item.province}}</td>    <td>{{item.hobb}}</td>    <!--<td><a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="showOverlay(index)">修改</a> | <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="del(index)">刪除</a></td>-->  </tr></table>

css:

[v-cloak] {  display: none}table {  border: 1px solid #ccc;  padding: 0;  border-collapse: collapse;  table-layout: fixed;  /*margin-top: 10px;*/  width: 100%;  margin-top: 45px;}table td,table th {  height: 30px;  border: 1px solid #ccc;  background: #fff;  font-size: 2vh;  padding: 12px 3px 6px 8px;  color: #666666;  font-weight: 300;}table th:first-child {  width: 4rem;}.container,.st {  /*width: 1000px;*/  margin: 10px auto 0;  font-size: 13px;  font-family: '微軟雅黑'}.container .search {  font-size: 15px;  padding: 4px;}.container .add {  padding: 5px 15px;}.overlay {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  z-index: 6;  background: rgba(0, 0, 0, 0.7);}.overlay td:first-child {  width: 8rem;}.overlay .con {  position: absolute;  /*width: 420px;*/  min-height: 300px;  background: #fff;  left: 50%;  top: 50%;  -webkit-transform: translate3d(-50%, -50%, 0);  transform: translate3d(-50%, -50%, 0);  /*margin-top: -150px;*/  padding: 20px;} .span_1{  font-size: 18px;  color: #666666;}

js:

Vue.component('model', {   template: '',  props: ['list', 'isactive'],  computed: {    modifylist() {      return this.list;    }  },  methods: {    changeActive() {      this.$emit('change');    },    modify() {      this.$emit('modify', this.modifylist);    },    add(){     }  }});  var app = new Vue({  el: '#app',  data: {    isActive: false,    selected: -1,    selectedlist: {},    slist: [],    searchlist: [],    list: [      {        name:'Fe1',        username: '開',        email: '221.122.62.221',        sex: '特例1',        province: '北京',        hobb:'電子機房'      },      {        name:'Fe2',        username: '關',        email: '192.168.12.222',        sex: '特例2',        province: '上海',        hobb: '服務機房'      },      {        name:'Fe3',        username: '開',        email: '127.255.255.255',        sex: '特例3',        province: '重慶',        hobb: '遙控機房'      },      {        name:'Fe4',        username: '關',        email: '223.255.255.255',        sex: '特例4',        province: '北京市',        hobb:'內網機房'      }    ]  },  created() {    this.setSlist(this.list);  },  methods: {    // 修改數據    showOverlay(index) {      this.selected = index;      this.selectedlist = this.list[index];      this.changeOverlay();    },    // 點擊保存按鈕    modify(arr) {      if (this.selected > -1) {        Vue.set(this.list, this.selected, arr);        this.selected = -1;      } else {        this.list.push(arr);      }      this.setSlist(this.list);       this.changeOverlay();    },     del(index) {      this.list.splice(index, 1);      this.setSlist(this.list);    },    changeOverlay() {      this.isActive = !this.isActive;    },    // 獲取需要渲染到頁面中的數據    setSlist(arr) {      this.slist = JSON.parse(JSON.stringify(arr));    },    // 搜索    search() {      var v = $('.search').val(),        self = this;      self.searchlist = [];      if (v) {        var ss = [];        // 過濾需要的數據        this.list.forEach(function (item) {          if (item.province.indexOf(v) > -1) {            if (self.searchlist.indexOf(item.province) == -1) {              self.searchlist.push(item.province);            }            ss.push(item);          } else if (item.hobb.indexOf(v) > -1) {            if (self.searchlist.indexOf(item.hobb) == -1) {              self.searchlist.push(item.hobb);            }            ss.push(item);          }        });        this.setSlist(ss); // 將過濾后的數據給了slist      } else {        // 沒有搜索內容，則展示全部數據        this.setSlist(this.list);      }    }  },  watch: {  }})