创建一个简单的Vue组件，用于显示一个列表，并实现动态添加和删除列表项的功能

以下是一个简单的Vue组件，用于显示一个列表，并实现动态添加和删除列表项的功能：

<template>
  <div>
    <button @click="addItem">添加列表项</button>
    <ul>
      <li v-for="(item, index) in itemList" :key="index">
        {{ item }}
        <button @click="deleteItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemList: []
    };
  },
  methods: {
    addItem() {
      this.itemList.push("新的列表项");
    },
    deleteItem(index) {
      this.itemList.splice(index, 1);
    }
  }
};
</script>

这个组件包含一个按钮和一个列表。点击按钮会在列表中添加一个新的列表项，每个列表项后面有一个删除按钮，点击删除按钮会删除对应的列表项。

相关问题

创建一个简单的Vue组件，用于显示一个列表，并实现动态添加和删除列表项的功能。

以下是一个简单的Vue组件，用于显示一个列表，并实现动态添加和删除列表项的功能：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
        <button @click="deleteItem(index)">删除</button>
      </li>
    </ul>
    <input type="text" v-model="newItem">
    <button @click="addItem">添加</button>
  </div>
</template>

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

这个组件包含一个列表，使用`v-for`指令循环渲染列表项，并使用`:key`绑定每个列表项的唯一标识。每个列表项后面有一个删除按钮，点击按钮会调用`deleteItem`方法删除对应的列表项。

在组件的`data`选项中，定义了一个`list`数组用于存储列表项，以及一个`newItem`变量用于绑定输入框的值。

`addItem`方法用于向列表中添加新的项，首先判断输入框的值是否为空，如果不为空，则将输入框的值添加到`list`数组中，并清空输入框的值。

`deleteItem`方法用于删除列表中的某一项，通过`splice`方法从`list`数组中移除对应的项。

你可以在父组件中使用这个子组件，并在父组件中传递数据给子组件，实现动态添加和删除列表项的功能。

创建一个vue应用程序，包含以下组件 TodoList组件：作为父组件，管理待办事项的状态和逻辑。 TodoInput组件：用于输入新的待办事项。使用组件嵌套和组件之间的传值来实现这个待办事项列表。

创建一个 Vue 应用程序包含 TodoList 和 TodoInput 组件，可以按照以下步骤进行：

1. **初始化项目**:
使用 `vue create your-project-name` 命令来初始化一个新的 Vue 项目。

2. **结构设计**:
- 在 `src/components` 目录下创建两个文件夹，分别叫做 `TodoList` 和 `TodoInput`。然后，在每个文件夹里分别创建 `.js` 或者 `.vue` 文件（如 `TodoList.vue` 和 `TodoInput.vue`）。

3. **TodoList组件**:

   <!-- TodoList.vue -->
   <template>
     <div>
       <h1>待办事项列表</h1>
       <ul ref="todoList">
         <li v-for="(item, index) in todos" :key="index">
           {{ item.text }}
           <!-- 使用道具传递删除操作到父组件 -->
           <button @click="deleteTodo(index)">删除</button>
         </li>
       </ul>
       <!-- 显示添加新项的表单 -->
       <TodoInput v-if="showAddForm" :on-add="addTodo"/>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         todos: [],
         showAddForm: false,
       };
     },
     methods: {
       addTodo(text) {
         this.todos.push({ text });
         this.showAddForm = false;
       },
       deleteTodo(index) {
         this.todos.splice(index, 1);
       },
     },
     // 使用自定义事件（v-on:input）监听TodoInput的变化并更新状态
     components: { TodoInput },
   };
   </script>

4. **TodoInput组件**:

   <!-- TodoInput.vue -->
   <template>
     <transition name="fade">
       <form @submit.prevent="submit">
         <input type="text" v-model="newTodoText" placeholder="添加待办事项...">
         <button type="submit">添加</button>
       </form>
     </transition>
   </template>

   <script>
   export default {
     props: ['on-add'],
     data() {
       return {
         newTodoText: '',
       };
     },
     methods: {
       submit() {
         if (this.newTodoText.trim()) {
           this.on-add(this.newTodoText);
         }
         this.newTodoText = '';
       },
     },
   };
   </script>

5. **主组件（App.vue）**:
在 App.vue 中引入并使用这两个组件，并实例化 TodoList 组件：

   <template>
     <div id="app">
       <TodoList/>
     </div>
   </template>

   <script>
   import TodoList from './components/TodoList.vue';
   import TodoInput from './components/TodoInput.vue';

   export default {
     components: {
       TodoList,
       TodoInput,
     },
   };
   </script>

6. **CSS样式和过渡效果**:
如果需要，可以在全局 CSS 或者对应的组件内添加样式，以及为组件间过渡效果设置 CSS 。

现在你已经创建了一个基本的 Vue 应用，其中 TodoList 管理待办事项，TodoInput 允许用户输入新的任务。通过数据绑定和事件驱动，它们之间实现了通信。