如何动态添加和删除按钮

要实现的效果见下图,先在带+号的button里输入要添加的值,鼠标离开控件后,该控件变为可删除的button,带+号的button移到后面以便后续添加
1536302185_25893

大概的思路:

template:

        <ul>
          <li v-for="(item,index) in list" :key="index">
            {{item}} 
            <span @click="_delete(index)">X</span>
           </li>
          <li>
            <button @click="add">添加</button>
          </li>
        </ul>

script:

    data() {
      return {
        list: []
      }
    },
    methods: {
      add() {
        this.list.push(Math.random())
      },
      _delete(index) {
        this.list.splice(index, 1)
      }
    }

好像不行,感觉是值没有push到list里,每次点击 【添加】的button之后,界面又重新刷新了回到了初始状态

你怎么写的?
贴一下代码吧

在elementUI的官方文档里找到了现成的控件,好吧,是我自己没仔细看文档
实现代码如下:
template:

    <el-tag
      v-for="(item,index) in freqlist"
      :key="index"
      :disable-transitions="false"
      closable
      @close="_delete(index)">
      {{ item }}
    </el-tag>
    <el-input
      v-if="inputVisible"
      ref="saveTagInput"
      v-model="freq"
      class="input-new-tag"
      size="small"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    >
    </el-input>
    <el-button v-else class="button-new-tag" @click="showInput">+ 频点</el-button>

script:

data() {
return {
  deviceid: 'ZDK2AD001',
  carrierid: 3,
  resulttimer: '',
  inputVisible: false,
  freq: '',
  value: '',
  freqlist: [], 
}}
methods: {
showInput() {
  this.inputVisible = true
  this.$nextTick(_ => {
    this.$refs.saveTagInput.$refs.input.focus()
  })
},
_delete(index) {
  this.freqlist.splice(index, 1)
},
handleInputConfirm() {
  const inputValue = this.freq
  if (inputValue) {
    this.freqlist.push(inputValue)
  }
  this.inputVisible = false
  this.freq = ''
},
}

style:

<style scoped>
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
background-color: #409eff;
color: #fff;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>