Vue.js 实现搜索框自动匹配列表内容示例

<div id='app'>
  <input type='text' v-model='inputText'>
  <ul>
    <li v-for='item in results'>{{item}}</li>
  </ul>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      inputText: '',
      message: [
        '冬季奥运会项目有哪些',
        '冬季奥运会项目获得金牌数',
        '今天天气刮风'
      ]
    },
    computed: {
      results: function() {
        var searchResult = this.message;
        if (this.inputText === '') {
          return searchResult;
        }
        var searchStr = this.inputText.toLowerCase().trim(); // 输入框数据转为小写，并去除空格
        searchResult = searchResult.filter(function(ele) {
          if (ele.toLowerCase().indexOf(searchStr) !== -1) {
            return ele;
          }
        });
        return searchResult;
      }
    }
  });
</script>