vue新增编辑Demo

前言：

Vue.js 是一个流行的 JavaScript 框架，用于构建现代化的用户界面。它提供了一种简单的方法来创建可重用且可组合的组件，使开发人员能够通过组合不同的组件来构建复杂的应用程序。在这个示例中，我们将展示一个 Vue.js 新增编辑的示例，用于展示如何使用 Vue.js 来实现动态添加和编辑数据的功能。

实现新增编辑功能：

首先，我们需要先引入 Vue.js 库和其他必要的插件。然后，我们可以通过创建一个 Vue 实例来开始我们的应用程序。

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.js"></script>
  
  <div id="app">
    <h4>新增/编辑数据示例</h4>
    <form @submit.prevent="saveData">
      <input type="text" v-model="name" placeholder="姓名">
      <input type="text" v-model="age" placeholder="年龄">
      <button type="submit">保存</button>
    </form>
    
    <ul>
      <li v-for="item in items">
        <span>姓名：{{ item.name }}, 年龄：{{ item.age }}</span>
        <button @click="editData(item)">编辑</button>
      </li>
    </ul>
  </div>

在上面的代码中，我们创建了一个表单来输入姓名和年龄，并且为保存按钮绑定了一个点击事件（通过 @submit.prevent 修饰符来阻止表单默认提交行为）。在 Vue 实例中，我们定义了名为“app”的根元素，并在其中定义了一些用于新增和编辑数据的绑定。

  new Vue({
    el: '#app',
    data: {
      name: '',
      age: '',
      items: []
    },
    methods: {
      saveData: function() {
        if (this.name && this.age) {
          if (this.editIndex !== undefined) { // 编辑数据
            this.items[this.editIndex].name = this.name;
            this.items[this.editIndex].age = this.age;
            this.editIndex = undefined;
          } else { // 新增数据
            this.items.push({ name: this.name, age: this.age });
          }
          this.name = '';
          this.age = '';
        }
      },
      editData: function(item) {
        this.name = item.name;
        this.age = item.age;
        this.editIndex = this.items.indexOf(item);
      }
    }
  });

在上面的代码中，我们定义了一个名为“saveData”的方法，用于保存输入的数据。该方法首先检查姓名和年龄是否为空，然后根据是否编辑数据来决定是新增数据还是编辑数据。如果是编辑数据，我们根据编辑索引找到对应的数据并更新；如果是新增数据，我们将新的数据对象添加到 items 数组中。最后，我们将输入框的值重置为空，以便进行下一次输入。

总结：

通过上述示例代码，我们展示了一个简单的 Vue 新增编辑的功能。用户可以通过输入姓名和年龄来新增一条数据，同时也可以通过点击编辑按钮来修改已存在的数据。这个示例演示了 Vue.js 的双向数据绑定、条件判断以及数据的增删改查操作。希望这个示例能帮助你更好地理解并使用 Vue.js。