vue input入力ボックスのキーワードフィルタ検索リストのデータ展示

プロジェクト開発ではキーワードフィルタの機能が使われることは避けられないと思いますが、ちょうど今回のプロジェクトで必要なことがあります。vueのinput入力ボックスにキーワードを入力してデータリストを検索するコードを整理してください。コードを直接入力します。
html数:

<!--   demo -->
<template>
 <div>
 <input type="text" v-model="search">
 <ul>
  <!--   ！  ！  ！        items，   data  list   -->
  <li v-for="(item,index) in items">
  <span>{{item.name}}</span>
  <span>{{item.msg}}</span>
  </li>
 </ul>
 </div>
</template>

フィールドを一致させる > js:

export default {
 data () {
 return {
  search:'',
  list:[
  {name:'AAA',msg:'aaa    1'},
  {name:'BBB',msg:'bbb    2'},
  {name:'CCC',msg:'ccc    3'},
  {name:'DDD',msg:'ddd    4'},
  {name:'EEE',msg:'eee    5'},
  ]
 }
 },
 
 computed: {
 //    
 items: function() {
  var _search = this.search;
  if (_search) {
  //        
  var reg = new RegExp(_search, 'ig')
  //es6 filter    ，      ，      
  return this.list.filter(function(e) {
   //      
   return Object.keys(e).some(function(key) {
   return e[key].match(reg);
   })
   //      
   // return e.name.match(reg);
  })
  };
  return this.list;
 }
 },
}

vue.jsコンポーネントの教程については、テーマvue.jsコンポーネント学習教程をクリックして学習してください。
もっと多いvue学習教程はテーマ『vue実戦教程』を読んでください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。