Vue 搜索历史功能的实现(增添，删除，隐藏，清空)

Vue刚入门，模仿了B站首页（部分）UI巩固所学知识，下面展示其中搜索历史功能的实现，项目完整代码和页面效果见文末链接

HTML：

<div class="search_record_box" id="search_record_box_id">
    <!-- 搜索框 -->
    <div class="top_navigation_bar_input">
        <input @blur="hide_browsing_history1" @focus="show_browsing_history1" v-model="inputValue"
            @keyup.enter="add" type="text" placeholder="海贼王">
        <el-button class="el-icon-search"></el-button>
    </div>
    <!-- 浏览记录-->
    <div class="browsing_history" v-show="browsing_history_show_or_not1">
        <ul>
            <li class="browsing_history_li browsing_history_li_title">
                <label><strong>&emsp;搜索历史</strong></label>
                <div class="browsing_history_clear">
                    <button class="browsing_history_clear_button" @click="clear">清空</button>
                </div>
            </li>
            <li v-for="(item,index) in home_top_navigation_list" class="browsing_history_li">
                <label>&emsp;{
   
   {index+1}}&emsp;{
   
   {item}}</label>
                <el-button class="el-icon-close" @click.stop="remove(index)"></el-button>
            </li>
        </ul>
    </div>
</div>

less：

.browsing_history {
    
    
  z-index: 1;
  margin-top: .1rem;
  height: auto;
  width: 33.45rem;
  display: flex;
  flex-direction: column;
  justify-content: start;
  .browsing_history_li {
    
    
    background-color: #FFFFFF;
    width: 33.45rem;
    height: 4rem;
    color: #A7A9AB;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .el-icon-close {
    
    
      border-radius: 0;
      border: 0;
      height: 4rem;
      background-color: #FFFFFF;
    }
  }
  .browsing_history_li_title {
    
    
    font-size: 1.4rem;
    color: #000000;
    .browsing_history_clear {
    
    
      height: 4.0rem;
      width: 4.0rem;
      background-color: #FFFFFF;
      button:hover {
    
    
        color: #00A1D6;
      }
      .browsing_history_clear_button {
    
    
        background-color: #FFFFFF;
        border: 0;
        color: #A7A9AB;
        // justify-content: center;
        // align-content: center;
      }
    }
  }
}

Vue：

var app = new Vue({
    
    
    el: '.bilibili_home_page',
    data: {
    
    
        home_top_navigation_list: ["海贼王", "元龙", "狐妖小红娘"],
        content_subdivision_list_up:["动画","音乐","舞蹈","知识","生活","时尚","娱乐","放映厅"],
        content_subdivision_list_down:["番剧","国创","游戏","科技","鬼畜","咨讯","影视"],
        inputValue: "",
        browsing_history_show_or_not1: 0,
    },
    methods: {
    
    
        add: function () {
    
    
            this.home_top_navigation_list.push(this.inputValue);
        },
        remove: function (index) {
    
    
            // console.log("删除");
            // console.log(index);
            this.home_top_navigation_list.splice(index, 1);
        },
        clear: function () {
    
    
            this.home_top_navigation_list = [];
        },
        show_browsing_history1: function () {
    
    
            this.browsing_history_show_or_not1 = 1;
        },
        hide_browsing_history1: function () {
    
    
            document.addEventListener("click", e => {
    
    
            	//box要覆盖到搜索历史框和搜索栏
                var box = document.getElementById("search_record_box_id");
                if (!box.contains(e.target)) {
    
    
                    // console.log("在外");
                    this.browsing_history_show_or_not1 = 0;
                }
            })
        },
        
    },
})

完整（也不太完整，正在持续更新中 ）项目代码见：
https://github.com/Ki-Wi-Berry/ki-wi-berry.github.io
页面效果详见：
https://ki-wi-berry.github.io/