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

Question

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

Answer 1

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

<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>