vue.js——学习计划表

最新推荐文章于 2025-03-26 11:00:06 发布

懒洋洋大大王王

最新推荐文章于 2025-03-26 11:00:06 发布

阅读量1w

点赞数 57

文章标签：学习

本文链接：https://blog.csdn.net/weixin_74878822/article/details/136985744

版权

1）准备工作

①打开D:\vue\chapter02\ learning_schedule 目录，找到 index.html 文件。

在文件中引入BootStrap 样式文件，具体代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

上述代码中，第6行代码引入Bootstrap的CSS文件，引用后即可使用Bootstrap快速开发响应式网页，使用全局CSS样式美化标签。

②修改src\App.vue文件中的默认内容，具体如图所示：

至此，“学习计划表”案例准备工作已完成。

2）渲染表格区域数据

接下来正式进入“学习计划表”案例的开发。在App组件中编写表格区域的页面结构和样式，并在页面上渲染表格数据，具体实现步骤如下。

① 在<script setup>标签中定义渲染表格所需的数据，具体代码如下

<script setup>
	import {ref} from 'vue'
	const list =ref([
		{
			id:'1',
			subject:'Vue.js前端实战开发',
			content:'学习指令，例如v-if、v-for、v-model等',
			place:'自习室',
			status:false,
		},
	])
</script>

上述代码中，list数组表示渲染表格区域所需的数据，id属性表示序号，subject属性表示学习科目，content属性表示学习内容，place属性表示学习地点，status属性表示学习计划的完成状态，若属性值为false，表示“未完成”，若属性值为true表示“已完成”。

② 根据Bootstrap文档找到Tables，根据实际需要合适的样式，本案例中表格的结构样式具体如下。

<template>
<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>
</table>
</template>