vue.js制作学习计划表案例

通俗易懂,完成“学习计划表”用于对学习计划进行管理,包括对学习计划进行添加、删除、修改等操作。

一. 初始页面效果展示

二.添加学习计划页面效果展示

 三.修改学习计划完成状态的页面效果展示

四.删除学习计划 

当学习计划处于“已完成”状态时,学生可以对学习计划进行删除操作,否则不能进行删除操作。

在html案例引入样式:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

新建 llk.vue文件

在llk.vue文件中写入代码:

<template><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.trim="subject" /></div></div><!-- 学习任务 --><div class="col-auto"><div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">学习内容</span><textarea class="form-control" v-model.trim="content" placeholder="请输入学习内容" :style="{ height: '32px' }"></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)">删除</a></td></tr></tbody></table></template><script setup>import {ref} from 'vue'const list = ref([{id: '1',subject: 'Vue.js 前端实战开发',content: '学习指令,例如 v-if、v-for、v-model 等',place: '自习室',status: false,}, ])let remove = (id, status) => {if (status) {list.value = list.value.filter(item => item.id !== id)} else {alert('请完成该学习计划后再进行删除操作!')}}let subject = ref('')let content = ref('')let nextId = ref('')let selectedOption = ref('自习室')let options = ref([{placeCode: 0,place: '自习室',},{placeCode: 1,place: '图书馆',},{placeCode: 2,place: '宿舍',},])let add = () => {if (subject.value === '') {alert('学习科目为必填项!')return}nextId.value = Math.max(...list.value.map(item => item.id)) + 1const obj = {id: nextId.value,subject: subject.value,content: content.value,place: selectedOption.value,status: false,}list.value.push(obj)subject.value = ''content.value = ''selectedOption.value = '自习室'}
</script><style>
</style>

找到main.js文件修改 成自己新建的名字

 

运行结果:

输入科目学习内容,选择学习地点进行添加

 

今天就分享到这里,感谢预览~ 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/770165.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue使用font-face自定义字体详解

目录 1 介绍2 使用2.1 语法2.2 属性说明2.3 Vue使用案例2.3.1 全局定义字体2.3.2 在页面使用 3 注意事项 1 介绍 font-face 是 CSS 中的一个规则&#xff0c;它允许你加载服务器上的字体文件&#xff08;远程或者本地&#xff09;&#xff0c;并在网页中使用这些字体。这样&am…

2024年3月26日 十二生肖 今日运势

小运播报&#xff1a;2024年3月26日&#xff0c;星期二&#xff0c;农历二月十七 &#xff08;甲辰年丁卯月己丑日&#xff09;&#xff0c;法定工作日。 红榜生肖&#xff1a;鸡、鼠、猴 需要注意&#xff1a;马、狗、羊 喜神方位&#xff1a;东北方 财神方位&#xff1a;…

VUE父子组件的传参问题

1.父组件向子组件传参 1&#xff09;这是一个父组件 //这是一个父组件 <div> <port :port-List"portList" ></port> </div> //port 这是子组件的名称export default{components: {},props: {},data() {return{portList:,}},computed: {}…

模式实现vue事件总线

前言&#xff1a;发布订阅模式&#xff0c;还具有解除订阅功能 模拟实现 function fn1(n1, n2) {console.log(first add, n1, n2)} function fn2(n1, n2) {console.log(second add, n1, n2)} function fn3(n1, n2) {console.log(third add, n1, n2)}class MYVue {constructor…

22.保护性暂停扩展(一对一)

如果需要多个类之间使用GuardedObject对象&#xff0c;作为参数传递不是很方便&#xff0c;因此设计一个解耦的中间类&#xff0c;这样不仅能够解耦结果的等待者和结果生产者&#xff0c;还能够支持多个任务的管理。 Futures就好比居民楼一层的信箱&#xff0c;每个信箱有房间的…

HarmonyOS实战开发-如何使用首选项能力实现一个简单示例。

介绍 本篇Codelab是基于HarmonyOS的首选项能力实现的一个简单示例。实现如下功能&#xff1a; 创建首选项数据文件。将用户输入的水果名称和数量&#xff0c;写入到首选项数据库。读取首选项数据库中的数据。删除首选项数据文件。 最终效果图如下&#xff1a; 相关概念 首选…

Facebook如何使用增强技术提升广告效果?

AR in AD - case study 脸书2021年宣布了引入AR的新方法&#xff0c;以推动其应用套件中的产品发现和购买。但他们首先考虑是技术。据脸书称&#xff0c;技术一直是增强现实在其应用程序中更广泛使用的主要障碍。这就是为什么它现在正在做出改变&#xff0c;使企业主和广告商更…

TextMeshPro图文混排的两种实现方式,不打图集

TMP图文混排 方案一&#xff1a;TMP自带图文混排使用方法打包图集使用 方案二&#xff1a;不打图集&#xff0c;可以使用任何图片 接到一个需求&#xff0c;TextMeshPro 图文混排。 方案一&#xff1a;TMP自带图文混排 优点布局适应优秀&#xff0c;字体左中右布局位置都很不错…

Web常见标签属性

应用软件&#xff1a;c/s&#xff08;客户端与服务端&#xff09; b/s&#xff08;服务器与浏览器架构&#xff09;web前端&#xff1a;html5、css3、JavaScriptHtml5&#xff1a;超文本标记语言 超链接标签 语法规范<标签名> marquee 标签之间可以嵌套属性&#xff1a;…

Redis中的事务机制

Redis中的事务机制 概述。 事务表示一组动作&#xff0c;要么全部执行&#xff0c;要么全部不执行。例子如下。 Redis提供了简单的事务功能&#xff0c;讲一组需要一起执行的命令放到multi和exec两个命令之间。multi命令代表事务开始&#xff0c;exec命令代表事务结束&#x…

【项目】均衡代码评测

TOC 目录 项目介绍 开发环境 主要技术 项目实现 公共模块 日志 工具类 编译运行模块 介绍 编译 运行 编译和运行结合起来 业务逻辑模块 介绍 MVC模式框架 模型&#xff08;Model&#xff09; 视图&#xff08;View) 控制器&#xff08;Controller&#xff09…

使用html做一个2048小游戏

下载地址: https://pan.xunlei.com/s/VNtiF13HxmmE4gglflvS1BUhA1?pwdvjrt# 提取码&#xff1a;vjrt”

Linux文件系统 底层原理

linux文件、目录、Inode inode负责文件的元数据和数据存储&#xff0c;文件存储块负责实际数据的存储&#xff0c;而目录文件维护文件名和inode之间的联系。 1. 用户空间到内核空间 首先&#xff0c;当用户程序请求打开一个文件时&#xff08;例如使用open系统调用&#xff09…

C/C++ 一些使用网站收集...

C/C 标准 各种语言协议标准文档 open-std.org 网站 C语言标准文档 open-std.org C基金会网站 C/C 标准库网站 c/c 标准库 cplusplus.com 网站 c/c标准库 cppreference.com 网站 C Core Guidelines【isocpp.org】 C/C 发展 C现有状态及未来规划【isocpp.org】

Excel 打开后提示:MicrosoftExcel无法计算某个公式。在打开的工作簿中有一个循环引用...

目录预览 一、问题描述二、原因分析三、解决方案四、参考链接 一、问题描述 MicrosoftExcel无法计算某个公式。在打开的工作簿中有一个循环引用&#xff0c;但无法列出导致循环的引I用。请尝试编辑上次输入的公式&#xff0c;或利用“撤消”命令删除该公式&#xff0c;如下图&…

Matplotlib如何显示多张图片(管理多个子图)

Matplotlib 可以使用 subplot 或 subplots 方法来创建子图&#xff0c;从而在同一窗口中显示多张图片。以下是一些示例代码&#xff0c;展示如何使用 Matplotlib 显示多张图片&#xff1a; 1.使用 subplot import matplotlib.pyplot as plt import matplotlib.image as mpi…

微服务(基础篇-003-Nacos)

目录 Nacos注册中心&#xff08;1&#xff09; 认识和安装Nacos&#xff08;1.1&#xff09; Nacos快速入门&#xff08;1.2&#xff09; 服务注册到Nacos(1.2.1) Nacos服务分级存储模型&#xff08;1.3&#xff09; 配置集群&#xff08;1.3.1&#xff09; 根据集群修改…

pta L1-004 计算摄氏温度

L1-004 计算摄氏温度 分数 5 全屏浏览 切换布局 作者 陈建海 单位 浙江大学 给定一个华氏温度F&#xff0c;本题要求编写程序&#xff0c;计算对应的摄氏温度C。计算公式&#xff1a;C5(F−32)/9。题目保证输入与输出均在整型范围内。 输入格式: 输入在一行中给出一个华氏…

如何用Airtest脚本连接无线Android设备?

之前我们已经详细介绍过如何用AirtestIDE无线连接Android设备&#xff0c;它的关键点在于&#xff0c;需要先 adb connect 一次&#xff0c;才能点击 connect 按钮无线连接上该设备&#xff1a; 但是有很多同学&#xff0c;在使用纯Airtest脚本的形式连接无线设备时&#xff0c…

odoo中,使用paramiko库ssh连接Linux

在 Python 中&#xff0c;可以使用 Paramiko 库来实现 SSHClient 连接。Paramiko 是一个用于远程登录、文件传输和自动化的 SSH 客户端库。 import paramiko# 创建 SSHClient 对象 ssh paramiko.SSHClient()# 设置自动添加主机密钥 ssh.set_missing_host_key_policy(paramiko.…