VUE—仿照淘宝历史记录的添加和删除（图文）

VUE—仿照淘宝历史记录的添加和删除

第一步： html

<template>
  <div>
    <div class="list">
<!--      例如淘宝推荐的热门搜索-->
      <h3>列表</h3> 
      <ul>
        <li ref="list" @click="chooseFn(index)" v-for="(item, index) in datalist" :key="index">{{item.title}}</li>
      </ul>
    </div>
    <div class="history">
<!--      点击热门搜索关键字之后在历史记录里添加-->
      <h3>历史记录</h3>
      <button @click="deleteFn">删除</button>
      <ul>
        <li v-for="(item, index) in datahistory" :key="index">{{item}}</li>
      </ul>
    </div>
  </div>
</template>

第二步：热门搜索列表

let datalist = [
    {
      title: 'aaa'
    },
    {
      title: 'bbb'
    },
    {
      title: 'ccc'
    },
    {
      title: 'ddd'
    },
    {
      title: 'eee'
    },
    {
      title: 'fff'
    }
  ]

第三步：

data () {
      return {
        datalist, // 热门搜索列表
        datahistory: [] // 空数组用来存放历史记录
      }
    },
    methods: {
      chooseFn (index) {
        if (this.datahistory.indexOf(this.$refs.list[index].innerText) == -1) { //排重，不重复添加历史记录
          this.datahistory.push(this.$refs.list[index].innerText)
        } else if (this.datahistory.indexOf(this.$refs.list[index].innerText) != -1) {
          this.datahistory.splice(this.$refs.list[index].innerText, 1) // 如果重复，删除已有的，重新添加
          this.datahistory.push(this.$refs.list[index].innerText)
        }
      },
      deleteFn () {
        this.datahistory = [] // 删除全部历史记录，数组清空即可
      }

点击热门搜索列表历史记录出现

如果有重复的则删除原先的然后再次添加

点击删除后全部清空