vue在页面上有一个输入文本框和一个添加按钮，当我们输完内容单击按钮后，这条内容就会显示在下面的列表中，同时点击每项内容后面的删除按钮能够把这项内容从列表中删除

在Vue.js中，你可以通过创建一个简单的组件结构来实现这个功能。首先，你需要定义两个组件：`InputBox` 和 `List`。`InputBox` 组件用于接收用户输入并触发添加操作，`List` 组件则展示和管理列表内容。

1. 创建一个`InputBox.vue`文件：

<template>
  <div>
    <input v-model="inputValue" @keyup.enter="addToList">
    <button @click="addToList">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  methods: {
    addToList() {
      if (this.inputValue) {
        this.items.push(this.inputValue);
        this.inputValue = '';
      }
    },
  },
};
</script>

2. 创建一个`List.vue`文件（假设你已经有一个名为`items`的数组在父组件中维护）：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
      <button @click="deleteItem(index)">删除</button>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['items'],
  methods: {
    deleteItem(index) {
      this.$emit('delete-item', index);
    },
  },
};
</script>

在父组件中，你将`InputBox`和`List`作为子组件，并监听`List`组件的`delete-item`事件来处理删除操作：

<template>
  <div>
    <InputBox @add-to-list="addItemToList"></InputBox>
    <List :items="listItems" @delete-item="deleteListItem"></List>
  </div>
</template>

<script>
import InputBox from './InputBox.vue';
import List from './List.vue';

export default {
  components: { InputBox, List },
  data() {
    return {
      listItems: [],
    };
  },
  methods: {
    addItemToList(item) {
      this.listItems.push(item);
    },
    deleteListItem(index) {
      this.listItems.splice(index, 1);
    },
  },
};
</script>

现在当你在`InputBox`中输入并点击“添加”，新内容会出现在`List`中。而点击列表中的删除按钮，则会触发删除事件，相应的内容会被移除。