vue 搜索功能怎么实现

用vue.js怎么实现搜索框搜索name关键字改变内容的功能？？？

1.在computer中刷新列表的内容

2.在搜索框中输入name，从后台查询，将结果返回给前端，刷新列表

<template>
  <div id="staggered-list-demo">
    <input v-model="query">
    <transition-group name="staggered-fade"
                      tag="ul"
                      v-bind:css="false"
                      v-on:before-enter="beforeEnter"
                      v-on:enter="enter"
                      v-on:leave="leave">
      <li v-for="(item, index) in computedList"
          v-bind:key="item.msg"
          v-bind:data-index="index">{{ item.msg }}</li>
    </transition-group>
  </div>
</template>
 
<script>
// npm install velocity-animate@beta 没安装先安装
import Velocity from 'velocity-animate'
 
export default {
  data () {
    return {
      query: '',
      list: [
        { msg: 'Bruce Lee' },
        { msg: 'Jackie Chan' },
        { msg: 'Chuck Norris' },
        { msg: 'Jet Li' },
        { msg: 'Kung Fury' }
      ]
    }
  },
  computed: {
    computedList () {
      var vm = this
      return this.list.filter(function (item) {
        return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
      })
    }
  },
  methods: {
    beforeEnter (el) {
      el.style.opacity = 0
      el.style.height = 0
    },
    enter (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(
          el,
          { opacity: 1, height: '1.6em' },
          { complete: done }
        )
      }, delay)
    },
    leave (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(
          el,
          { opacity: 0, height: 0 },
          { complete: done }
        )
      }, delay)
    }
  }
}
</script>

简简单单，你点击查询的时候调用后台给的接口，按接口需要的内容去传值就好；

<el-input placeholder="请输入内容" v-model="titleserch" @keyup.enter.native="searchbutton()">

<el-button slot="append" icon="el-icon-search" @click="searchbutton()"></el-button>

</el-input>

searchbutton（）{

let params = {

title: this.titleserch,

};

调接口

}

vue 搜索功能 怎么实现

vue 搜索功能怎么实现