vue写一个 物品清单管理系统

好的，以下是一个简单的 Vue 物品清单管理系统示例：

首先，我们需要一个用于显示物品清单的组件 `ItemList`：

<template>
  <div>
    <h2>物品清单</h2>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} - {{ item.quantity }}
        <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    items: Array
  },
  methods: {
    removeItem(index) {
      this.$emit('remove-item', index);
    }
  }
}
</script>

在这个组件中，我们使用了 `v-for` 指令来遍历传入的 `items` 数组，将每个物品的名称和数量渲染成一个列表项，并为每个列表项添加了一个“删除”按钮。当用户点击该按钮时，我们会触发 `removeItem` 方法，并通过 `$emit` 方法将要删除的物品的索引传递给父组件。

接下来，我们需要一个用于添加新物品的组件 `NewItemForm`：

<template>
  <div>
    <h2>添加新物品</h2>
    <form @submit.prevent="addItem">
      <label>名称：</label>
      <input type="text" v-model="name">
      <label>数量：</label>
      <input type="number" v-model.number="quantity">
      <button>添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      quantity: 0
    }
  },
  methods: {
    addItem() {
      if (this.name !== '' && this.quantity > 0) {
        this.$emit('add-item', { name: this.name, quantity: this.quantity });
        this.name = '';
        this.quantity = 0;
      }
    }
  }
}
</script>

在这个组件中，我们使用了一个表单来让用户输入新物品的名称和数量，并为表单的提交事件绑定了一个 `addItem` 方法。当用户点击添加按钮时，我们会判断输入的名称是否为空以及数量是否大于 0，如果是的话就会将新物品的名称和数量打包成一个对象并通过 `$emit` 方法传递给父组件，并将输入框清空。

最后，我们可以在父组件中将这两个组件组合在一起，形成一个完整的物品清单管理系统：

<template>
  <div>
    <item-list :items="items" @remove-item="removeItem"></item-list>
    <new-item-form @add-item="addItem"></new-item-form>
  </div>
</template>

<script>
import ItemList from './components/ItemList.vue';
import NewItemForm from './components/NewItemForm.vue';

export default {
  components: {
    ItemList,
    NewItemForm
  },
  data() {
    return {
      items: [
        { name: '苹果', quantity: 3 },
        { name: '香蕉', quantity: 2 },
        { name: '橙子', quantity: 1 }
      ]
    }
  },
  methods: {
    addItem(item) {
      this.items.push(item);
    },
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
}
</script>

在这个父组件中，我们将 `ItemList` 和 `NewItemForm` 组件引入并分别渲染出来。我们还定义了一个 `items` 数组来保存用户添加的物品清单，并通过 `addItem` 和 `removeItem` 方法来添加和删除物品。当用户在 `NewItemForm` 组件中添加新物品时，会触发 `addItem` 方法将新物品添加到 `items` 数组中，从而更新 `ItemList` 组件中的列表。当用户在 `ItemList` 组件中点击某个物品的删除按钮时，会触发 `removeItem` 方法将该物品从 `items` 数组中删除，从而更新 `ItemList` 组件中的列表。