在vue.js中运用computed计算属性的知识生成一段有关名单姓名添加删除的代码

在Vue.js中，我们通常会使用`computed`属性来响应式地计算一些数据，比如在处理名单姓名的增删操作时。假设我们有一个数组来存储用户列表，我们可以创建一个`computed`属性来动态展示名字，并提供添加和删除功能。这是一个简单的示例：

<template>
  <div>
    <ul>
      <li v-for="(user, index) in displayedUsers" :key="index">
        {{ user.name }}
        <button @click="removeUser(index)">删除</button>
      </li>
    </ul>
    <input type="text" v-model="newName" placeholder="输入新姓名">
    <button @click="addUser">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [], // 初始用户列表
      newName: '', // 新姓名输入框值
    };
  },
  computed: {
    displayedUsers() { // 使用 computed 计算显示的用户列表，去除了已删除的用户
      return this.users.filter((user) => !this.deletedIndices.includes(user.$index));
    },
    deletedIndices: { // 删除操作后的索引集合
      get() {
        return this._deletedIndices || [];
      },
      set(indices) {
        this._deletedIndices = indices;
        // 可选：更新实际的 users 数据结构（如删除元素）
        if (indices.length) {
          this.users.splice(...indices.map(Number), 1);
        }
      },
    },
  },
  methods: {
    addUser() {
      if (this.newName.trim()) { // 检查是否输入了名称
        this.users.push({ name: this.newName });
        this.newName = '';
      }
    },
    removeUser(index) {
      this.deletedIndices.push(index); // 添加删除的索引
    },
  },
};
</script>

在这个例子中，`displayedUsers`是一个`computed`属性，它基于`users`数组实时过滤出未被删除的用户。当用户点击删除按钮时，我们把对应的索引添加到`deletedIndices`，然后在`set`方法里同步更新数据。添加用户则是在`addUser`方法中进行。