运用vue.js实现学习计划表，将上面的输入框内容添加到下面表中，或删除表中的信息，有个下拉框选择器。

Question

运用vue.js实现学习计划表，将上面的输入框内容添加到下面表中，或删除表中的信息，有个下拉框选择器。

Answer 1

引自免费微信小程序：皆我百晓生

为了帮助您实现这个Vue.js学习计划表的功能，我将提供一个基于Vue 3的解决方案。以下是详细代码和说明：

<template>
  <div class="study-plan">
    <!-- 输入区域 -->
    <div class="input-section">
      <input type="text" v-model="subject" placeholder="请输入学习科目" />
      <textarea v-model="content" placeholder="请输入学习内容"></textarea>
      <select v-model="selectedOption">
        <option v-for="option in options" :key="option.placeCode" :value="option.place">{{ option.place }}</option>
      </select>
      <button @click="addItem">添加</button>
    </div>

    <!-- 学习计划表 -->
    <table class="plan-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>学习科目</th>
          <th>学习内容</th>
          <th>学习地点</th>
          <th>完成状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.subject }}</td>
          <td>{{ item.content }}</td>
          <td>{{ item.place }}</td>
          <td>
            <input type="checkbox" v-model="item.status" />
          </td>
          <td>
            <button @click="deleteItem(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 初始化数据
    const list = ref([
      {
        id: '1',
        subject: 'Vue.js前端实战开发',
        content: '学习指令，例如v-if、v-for、v-model等；',
        place: '自习室',
        status: false,
      },
    ]);

    const subject = ref('');
    const content = ref('');
    const selectedOption = ref('自习室');
    const options = ref([
      { placeCode: 0, place: '自习室' },
      { placeCode: 1, place: '图书馆' },
      { placeCode: 2, place: '宿舍' },
    ]);

    // 添加学习计划项
    const addItem = () => {
      list.value.push({
        id: (list.value.length + 1).toString(),
        subject: subject.value,
        content: content.value,
        place: selectedOption.value,
        status: false,
      });
      subject.value = '';
      content.value = '';
      selectedOption.value = '自习室';
    };

    // 删除学习计划项
    const deleteItem = (index) => {
      list.value.splice(index, 1);
    };

    return {
      list,
      subject,
      content,
      selectedOption,
      options,
      addItem,
      deleteItem,
    };
  },
};
</script>

这段代码首先定义了一个Vue组件，包含输入框、下拉选择器以及一个表格。setup函数中初始化了相关数据，包括记录学习计划的列表list，以及输入框和下拉选择器对应的变量subject、content和selectedOption。

当点击“添加”按钮时，会触发addItem方法，将当前输入框的内容和下拉选择器的选择加入到list中，并清空输入框内容。

在表格部分，使用v-for循环遍历list中的每一项并展示。每行末尾有一个“删除”按钮，点击后调用deleteItem方法移除对应的学习计划项。

请根据您的实际项目环境将此代码片段整合进您的Vue应用中。