用vue做的页面，有没有什么方法能够在浏览器上修改div里的数据

就是用vue做的一个页面，这个页面里有div动态展示出数据，我想在下面加个修改按钮，点击就能把div在网页变成可以修改的样子，请问该怎么做呢，谢谢了

想修改展示的数据？
是这样》？

<template>
  <div class="">
    <div>
      <div v-for="(item,index) in data" :key="index">
        <template v-if="isEdit"><el-input v-model="item.name"/></template>
        <template v-else>{{item.name}}</template>
      </div>
    </div>
    <el-button @click="changeEdit">修改</el-button>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        isEdit: false,
        data: [
          {id: 1, name: 1},
          {id: 2, name: 2},
          {id: 3, name: 3},
          {id: 4, name: 4}
        ]
      }
    },
    created () {
    },
    methods: {
      changeEdit () {
        this.isEdit = !this.isEdit
      }
    }
  }
</script>

就是一个点击事件 修改值

在按钮上加个点击事件，然后要修改好的div显示出来，原来的隐藏

思路：
1.监听div点击事件
2.点击div，获取div内容
3.隐藏div，显示input，div内容赋值给input
4.监听input失焦事件，获取input内容
5.隐藏input，显示div，input值赋值给div