3.历史记录搜索--不重复显示搜索记录

1.引入Vue
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <div id="app">
        <input type="text" v-model="keyword">
        <button @click="handleAdd">添加</button>
        <h4>历史记录</h4>
        <button v-for="item of historyWords.slice(0,4)">{{item}}</button>
    </div>
    <script>
       new Vue({
           el:"#app",
           data(){
               return{
                   msg:"hello qor",
                   keyword:"",
                   /* historywords长度为8 */
                   historyWords:["你的名字","王菲"]
               }
           },
           methods:{
               handleAdd(){
                  {
                       if(!this.historyWords.includes(this.keyword)){
                        this.historyWords.unshift(this.keyword)
                       }   
                   }
               }
           }
       })
    </script>