VUE2课程计划表练习
主要练习数据变量对象
以下是修正后的完整代码：
//javascript
export default {data() {return {list: [{ id: '1', subject: 'Vue.js 前端实战开发', content: '学习指令，例如 v-if、v-for、v-model 等', place: '自习室', status: false }// 可以在这里添加更多项目...]}}
}
关键点
data() 现在返回一个包含 list 属性的对象
list 被正确定义为数组（使用方括号[]）
对象属性使用引号包裹（更规范的写法）
每个对象之间使用逗号分隔（如果有多个对象）
index.html代码
<!DOCTYPE html>
<html lang=""><head><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link href="css/bootstrap.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>APP.VUE组件代码
<template><div id=app><div class="card"><!-- 标题区域 --><div class="card-header">学习计划表</div><!-- 提交区域 --><div class="card-body"><form @submit.prevent="add"><div class="row g-4"><!-- 学习科目 --><div class="col-auto"><div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习科目</span><input type="text" class="form-control" placeholder="请输入学习科目" v-model="subject"></div></div><!-- 学习任务 --><div class="col-auto"><div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习内容</span><textareaclass="form-control" placeholder="请输入学习内容" style="height: 32px;" v-model="content"></textarea></div></div><!-- 学习地点 --><div class="col-auto"><div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习地点</span><select class="form-select form-select-sm" v-model="selectedOption"><option v-for="option in options" :value="option.place" :key="option.placeCode">{{ option.place }}</option></select></div></div><!-- 添加按钮 --><div class="col-auto"><button type="submit" class="btn btn-primary">添加</button></div></div></form></div></div><table class="table table-striped table-hover table-bordered"><thead><tr><th scope="col">序号</th><th scope="col">学习科目</th><th scope="col">学习内容</th><th scope="col">学习地点</th><th scope="col">完成状态</th><th scope="col">操作</th></tr></thead><tbody><tr v-for="item in list" :key="item.id"><td>{{ item.id }}</td><td>{{ item.subject }}</td><td>{{ item.content }}</td><td>{{ item.place }}</td><td><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="'cb' + item.id"v-model="item.status" /><label class="form-check-label" for="'cb' + item.id" v-if="item.status">已完成</label><label class="form-check-label" for="'cb' + item.id" v-else>未完成</label></div></td><td><a href="javascript:;" @click="remove(item.id,item.status)">删除</a></td></tr></tbody></table>
</div></template><script>export default{data(){return {subject:'',content:'',nextId:'',selectedOption:'自习室', options:[{placeCode: 0,place: '自习室',}, {placeCode: 1,place: '图书馆',}, {placeCode: 2,place: '宿舍',}],list:[{id: '1', subject: 'Vue.js 前端实战开发222', content: '学习指令，例如 v-if、v-for、v-model 等',place: '自习室',status: false}]}},methods:{add(){// alert(1111122222)if (this.subject === '') {alert('学习科目为必填项！')return}this.nextId = Math.max(this.list.map(item => item.id)) + 1let obj = {id: this.nextId,subject: this.subject,content: this.content,place: this.selectedOption,status: false,}this.list.push(obj)this.subject = ''this.content = ''this.selectedOption = '自习室'},remove(id,status){// alert(id)if (status) {this.list = this.list.filter(item => item.id !== id)} else {alert('请完成该学习计划后再进行删除操作！')}}}}</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
</style>相关文章：
VUE2课程计划表练习
主要练习数据变量对象 以下是修正后的完整代码： //javascript export default {data() {return {list: [{ id: 1, subject: Vue.js 前端实战开发, content: 学习指令，例如 v-if、v-for、v-model 等, place: 自习室, status: false }// 可以在这里添加更…...
虚拟文件系统
虚拟文件系统（Virtual File System，VFS）是操作系统内核中的一个抽象层，它为不同的文件系统（如ext4、NTFS、FAT32等）提供统一的访问接口。通过VFS，用户和应用程序无需关心底层文件系统的具体差异…...
2025年软件工程与数据挖掘国际会议(SEDM 2025)
2025 International Conference on Software Engineering and Data Mining 一、大会信息 会议简称：SEDM 2025 大会地点：中国太原 收录检索：提交Ei Compendex,CPCI,CNKI,Google Scholar等 二、会议简介 2025年软件开发与数据挖掘国际会议于…...
基于大模型预测的足月胎膜早破行阴道分娩全流程研究报告
目录 一、引言 1.1 研究背景与意义 1.2 研究目的与方法 1.3 研究创新点 二、胎膜早破（足月）行阴道分娩概述 2.1 胎膜早破定义与分类 2.2 足月胎膜早破行阴道分娩的现状与挑战 2.3 大模型预测引入的必要性 三、大模型预测原理与技术 3.1 大模型介绍 3.2 数据收集与…...
学习记录：DAY28
DispatcherController 功能完善与接口文档编写 前言 没什么动力说废话了。 今天来完善 DispatcherController 的功能，然后写写接口文档。 日程 早上：本来只有早八，但是早上摸鱼了，罪过罪过。下午：把 DispatcherContro…...
软件系统中功能模型 vs 数据模型 对比解析
功能模型 vs 数据模型 对比解析 一、功能模型（Functional Model） 定义：描述系统 做什么（业务逻辑与操作流程） 核心关注：行为、交互、业务流程 建模工具： 用例图（UML Use Case Dia…...
.NET高频技术点（持续更新中）
1. .NET 框架概述 .NET 框架的发展历程.NET Core 与 .NET Framework 的区别.NET 5 及后续版本的统一平台 2. C# 语言特性 异步编程（async/await）LINQ（Language Integrated Query）泛型与集合委托与事件属性与索引器 3. ASP.NET…...
pandas中的数据聚合函数：`pivot_table` 和 `groupby`有啥不同？
pivot_table 和 groupby 是 pandas 中两种常用的数据聚合方法，它们都能实现数据分组和汇总，但在使用方式和输出结构上有显著区别。 0. 基本介绍 groupby分组聚合 groupby 是 Pandas 库中的一个功能强大的方法，用于根据一个或多个列对数据进…...
微调大模型如何准备数据集——常用数据集，Alpaca和ShareGPT
微调大模型如何准备数据集——常用数据集，Alpaca和ShareGPT 数据集准备常用数据集自定义数据集AlpacaShareGPT数据集准备 常用数据集 预训练数据集 Wiki Demo (en)RefinedWeb (en)RedPajama V2 (en)Wikipedia (en)Wikipedia (zh)Pile (en)...
【Gradio】helloworld程序
前言 发现这个库用来做可视化的demo还不错，简单学习一下。 官网 https://www.gradio.app/ 安装 pip install gradio -i https://pypi.tuna.tsinghua.edu.cn/simple/helloWorld 示例 import gradio as grdef greet(name):return "hello"nameifacegr…...
机器学习例题——预测facebook签到位置（K近邻算法）和葡萄酒质量预测（线性回归）
一、预测facebook签到位置 代码展示： import pandas as pd from sklearn.preprocessing import StandardScaler from sklearn.model_selection import train_test_split from sklearn.neighbors import KNeighborsClassifier from sklearn.model_selection import…...
对golang中CSP的理解
概念： CSP模型，即通信顺序进程模型，是由英国计算机科学家C.A.R. Hoare于1978年提出的。该模型强调进程之间通过通道（channel）进行通信，并通过消息传递来协调并发执行的进程。CSP模型的核心思想是“不要通过…...
使用 pgrep 杀掉所有指定进程
使用 pgrep 杀掉所有指定进程 pgrep 是一个查找进程 ID 的工具，结合 pkill 或 kill 命令可以方便地终止指定进程。以下是几种方法： 方法1：使用 pkill（最简单） pkill 进程名例如杀掉所有名为 “firefox” 的进程&…...
Missashe考研日记-day36（改版说明）
Missashe考研日记-day36 改版说明 经过一天的思考、纠结和尝试，博主决定对更新内容进行改版，如下：1.不再每天都发一篇日记，改为一周发一篇包含一周七天学习进度的周记，但为了标题和以前相同（强迫症&#…...
基于Jetson Nano与PyTorch的无人机实时目标跟踪系统搭建指南
引言：边缘计算赋能智能监控 在AIoT时代，将深度学习模型部署到嵌入式设备已成为行业刚需。本文将手把手指导读者在NVIDIA Jetson Nano（4GB版本）开发板上，构建基于YOLOv5SORT算法的实时目标跟踪系统，集成无人…...
【LunarVim】CMake LSP配置
在 LunarVim 中为 CMakeLists.txt 文件启用代码提示（如补全和语义高亮），需要安装支持 CMake 的 LSP（语言服务器）和适当的插件。以下是完整配置指南： 1、配置流程 1.1 安装cmake-language-server 通过 Ma…...
Mkdocs页面如何嵌入PDF
嵌入PDF 嵌入PDF代码 ，注意PDF的相对地址 <iframe src"../个人简历.pdf (相对地址)" width"100%" height"800px" style"border: 1px solid #ccc; overflow: auto;"></iframe>我的完整代码： <d…...
从零开始学Flink：开启实时计算的魔法之旅
在凌晨三点的数据监控大屏前，某电商平台的技术负责人突然发现一个异常波动：支付成功率骤降15%。传统的数据仓库此时还在沉睡，而基于Flink搭建的实时风控系统早已捕捉到这个信号，自动触发预警机制。当运维团队赶到时，系…...
融合静态图与动态智能：重构下一代智能系统架构
引言：智能系统的分裂 当前的大模型系统架构正处于两个极端之间： 动态智能体系统：依赖语言模型动态决策、自由组合任务，智能灵活但稳定性差； 静态流程图系统：具备强工程能力，可控可靠…...
滑动窗口-窗口中的最大/小值-单调队列
求窗口的最大值 #include <iostream> //滑动窗口最大值用单调队列q[]，q存储候选最大值的下标 //队列头是最大值的下标 using namespace std; const int N100010; int nums[N],q[N]; int hh0,tt-1;// hh 是队头指针，tt 是队尾指针，初始…...
Java设计模式全面详解：从基础到高级的23种模式简介
引言：设计模式概述 设计模式是软件设计中常见问题的典型解决方案，它们就像预制的蓝图，你可以通过调整来解决代码中反复出现的设计问题。Java设计模式通常分为三大类： 创建型模式：处理对象创建机制结构型模式：处理对象组合行为型模式：处理对象间的交互与职责分配#mermai…...
WORD压缩两个免费方法
日常办公和学习中，Word文档常常因为包含大量图片、图表或复杂格式而导致文件体积过大，带来诸多不便，比如 邮件发送受限：许多邮箱附件限制在10-25MB，大文件无法直接发送 存储空间占用：大量文档占用硬盘或云…...
skywalking服务安装与启动
skywalking服务安装并启动 1、介绍2、下载apache-skywalking-apm3、解压缩文件4、创建数据库及用户5、修改配置文件6、下载 MySQL JDBC 驱动7、启动 OAP Serve,需要jkd11,需指定jkd版本,可以修改文件oapService.sh8、启动 Web UI,需要jkd11,需指定jkd版本,可以修改文件oapServi…...
Qt 中信号与槽（signal-slot）机制支持 多种连接方式（ConnectionType）
Qt 中信号与槽（signal-slot）机制支持 多种连接方式（ConnectionType） Qt 中信号与槽（signal-slot）机制支持 多种连接方式（ConnectionType），用于控制信号发出后如何调用槽…...
Booth Encoding vs. Non-Booth Multipliers —— 穿透 DC 架构看乘法器的底层博弈
目录 🧭 前言 🌱 1. Non-Booth 乘法器的实现原理（也叫常规乘法器） 🔧 构建方式 ✍️ 例子：4x4 Non-Booth 乘法器示意 🧱 硬件结构 ✅ 特点总结 ⚡ 2. Booth Encoding（布斯编码…...
Midjourney-V7：支持参考图片头像或背景生成新保真图
Midjourney-V7重磅升级Omni Reference：全能图像参考神器！再也不用担心生成图片货不对版了！ 就在上周，Midjourney发版它最新的V7版本：Omini Reference，提供了全方位图像参考功能，它可以参考你提…...
耀圣-气动带刮刀硬密封法兰球阀：攻克颗粒高粘度介质的自清洁 “利器”
气动带刮刀硬密封法兰球阀：攻克颗粒高粘度介质的自清洁 “利器” 在化工、矿业、食品加工等行业中，带颗粒高粘度介质、料浆及高腐蚀性介质的输送与控制一直是行业难题。普通阀门极易因介质附着、颗粒堆积导致卡阻失效，密封面磨损加剧&#x…...
Google云计算原理和应用之分布式锁服务Chubby
Chubby是Google设计的提供粗粒度锁服务的一个文件系统，它基于松耦合分布式系统，解决了分布的一致性问题。通过使用Chubby的锁服务，用户可以确保数据操作过程中的一致性。不过值得注意的是，这种锁只是一种建议性的锁（Advisory Lock）而不是强制性的锁，这种选择系统具有更大…...
SM2Utils NoSuchMethodError: org.bouncycastle.math.ec.ECFieldElement$Fp.＜init
1，报错图示 2，报错原因： NoSuchMethodError 表示运行时找不到某个方法，通常是编译时依赖的库版本与运行时使用的库版本不一致。 错误中的 ECFieldElement$Fp. 构造函数参数为 (BigInteger, BigInteger)，说明代码期望使…...
《100天精通Python——基础篇 2025 第16天：异常处理与调试机制详解》
目录 一、认识异常1.1 为什么要使用异常处理机制?1.2 语法错误1.3 异常错误1.4 如何解读错误信息 二、异常处理2.1 异常的捕获2.2 Python内置异常2.3 捕获多个异常2.4 raise语句与as子句2.5 使用traceback查看异常2.6 try…except…else语句2.7 try…except…finally语句--捕获…...