使用vue根据状态添加列表数据和删除列表数据的实例

下面是关于使用Vue实现添加和删除列表数据的攻略。

添加列表数据

准备工作

创建一个Vue实例；
在Vue实例中创建一个data属性，用于存放列表数据；
在Vue实例的template中使用v-for指令渲染列表数据；
在Vue实例的template中添加一个表单，用户可以在该表单中添加新的列表数据；

<template>
  <div>
    <h2>列表数据：</h2>
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
    <h2>添加数据：</h2>
    <form @submit.prevent="addItem">
      <input type="text" v-model="newItem">
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['item1', 'item2', 'item3'],
      newItem: ''
    }
  },
  methods: {
    addItem() {
      if (this.newItem !== '') {
        this.list.push(this.newItem);
        this.newItem = '';
      }
    }
  }
}
</script>

上面的代码中，我们创建了一个Vue组件，其中的data属性中包含了一个数组list，表示列表数据。在组件的template中，我们使用了v-for指令将list中的每个元素渲染到了li标签中，实现了列表数据的展示。接着，在表单中添加了一个文本框和一个按钮，用于用户输入新的列表数据。表单绑定了一个@submit事件，该事件会调用addItem方法将用户输入的数据添加到list中。

删除列表数据

准备工作

在Vue实例的template中为每个列表项添加一个删除按钮，并绑定@click事件，当用户点击该按钮时触发删除操作。

<template>
  <div>
    <h2>列表数据：</h2>
    <ul>
      <li v-for="(item, index) in list">
        {{ item }}
        <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    }
  },
  methods: {
    removeItem(index) {
      this.list.splice(index, 1);
    }
  }
}
</script>

上面的代码中，我们为每个列表项添加了一个删除按钮，并绑定了@click事件。当用户点击某个按钮时，该按钮所在的列表项会被删除。在Vue组件的script部分，我们实现了一个名为removeItem的方法，该方法用于删除指定位置的列表数据。在该方法中，使用了splice方法来删除指定位置的数据。

示例演示视频：