本地json数据的增删改查#Vue3

在Vue 3中，你可以使用以下方法来实现本地JSON数据的增删改查操作：

1. 创建一个Vue组件，并定义一个响应式的数据对象来保存你的JSON数据。
2. 使用方法来执行增删改查操作。

以下是一个简单的示例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in jsonData" :key="index">
        {{ item.name }} - {{ item.value }}
        <button @click="editItem(index)">编辑</button>
        <button @click="deleteItem(index)">删除</button>
      </li>
    </ul>
    <button @click="addItem">添加</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const jsonData = ref([
      { name: 'Item 1', value: 10 },
      { name: 'Item 2', value: 20 },
      // ...其他数据
    ]);
 
    // 添加项目
    function addItem() {
      const newItem = { name: `Item ${jsonData.value.length + 1}`, value: 0 };
      jsonData.value.push(newItem);
    }
 
    // 编辑项目
    function editItem(index, newName, newValue) {
      if (arguments.length === 2) {
        // 如果只传入index和新名称，则使用提供的新名称
        jsonData.value[index].name = newName;
      } else {
        // 如果同时传入index、新名称和新值，则更新全部信息
        jsonData.value[index] = { name: newName, value: newValue };
      }
    }
 
    // 删除项目
    function deleteItem(index) {
      jsonData.value.splice(index, 1);
    }
 
    return { jsonData, addItem, editItem, deleteItem };
  },
};
</script>

在这个例子中，jsonData是一个响应式引用，用于保存你的数据数组。你可以通过addItem方法添加新项，editItem方法编辑现有项，deleteItem方法删除项目。在模板中，你可以看到如何使用这些方法来绑定按钮的点击事件。