diff --git "a/\347\245\235\346\204\217\350\277\234/20260420-vue\345\210\233\345\273\272.md" "b/\347\245\235\346\204\217\350\277\234/20260420-vue\345\210\233\345\273\272.md"
new file mode 100644
index 0000000000000000000000000000000000000000..43dda821e83f54658a273e66df04b86946212d3b
--- /dev/null
+++ "b/\347\245\235\346\204\217\350\277\234/20260420-vue\345\210\233\345\273\272.md"
@@ -0,0 +1,218 @@
+# 笔记
+
+## Vue + Yarn 项目创建完整总结
+
+### 一、环境准备
+
+#### 1. 安装 Node.js（必须）
+- **要求版本**：`^20.19.0` 或 `>=22.12.0`
+- **下载地址**：https://nodejs.org/ （选择 LTS 版本）
+- **验证安装**：
+```bash
+node -v   # 查看版本号
+```
+
+#### 2. 安装 Yarn
+```bash
+npm install -g yarn
+```
+- **验证安装**：
+```bash
+yarn -v   # 查看版本号
+```
+
+---
+
+### 二、创建 Vue 项目
+
+#### 方法一：使用 `yarn create`（官方推荐）
+```bash
+yarn create vue@latest
+```
+
+#### 方法二：使用 `npx`（备选方案）
+```bash
+npx create-vue@latest
+```
+
+---
+
+### 三、创建过程中的配置选项
+
+运行创建命令后，会出现以下交互选项（使用键盘上下键选择，回车确认）：
+
+| 选项 | 推荐选择（初学者） | 说明 |
+|------|------------------|------|
+| Project name | `my-vue-app` | 项目名称，可自定义 |
+| Add TypeScript? | `No` | TypeScript 支持，初学者先选 No |
+| Add JSX Support? | `No` | JSX 语法支持 |
+| Add Vue Router? | `No` | 页面路由，后续可添加 |
+| Add Pinia? | `No` | 状态管理，后续可添加 |
+| Add Vitest? | `No` | 单元测试工具 |
+| Add E2E Testing? | `No` | 端到端测试 |
+| Add ESLint? | `Yes` | 代码检查工具（推荐） |
+| Add Prettier? | `Yes` | 代码格式化工具（推荐） |
+
+---
+
+### 四、创建后操作步骤
+
+```bash
+# 1. 进入项目目录
+cd my-vue-app
+
+# 2. 安装依赖
+yarn install
+
+# 3. 启动开发服务器
+yarn dev
+```
+
+启动成功后，终端会显示：
+```bash
+VITE v5.x.x  ready in xxx ms
+
+➜  Local:   http://localhost:5173/
+➜  Network: use --host to expose
+```
+
+在浏览器打开 `http://localhost:5173/` 即可看到项目。
+
+---
+
+### 五、项目结构说明
+
+```
+my-vue-app/
+├── index.html              # 入口 HTML 文件
+├── package.json            # 项目配置文件
+├── yarn.lock              # Yarn 锁定文件（自动生成）
+├── vite.config.js         # Vite 配置文件
+├── public/                # 公共静态资源
+│   └── favicon.ico
+└── src/                   # 源代码目录（主要操作区域）
+    ├── main.js            # 应用入口文件
+    ├── App.vue            # 根组件
+    ├── assets/            # 静态资源（图片、CSS等）
+    ├── components/        # 可复用组件
+    └── views/             # 页面组件（使用 Router 后才有）
+```
+
+---
+
+### 六、常用 Yarn 命令速查
+
+| 操作 | 命令 | 说明 |
+|------|------|------|
+| 创建项目 | `yarn create vue@latest` | 创建新 Vue 项目 |
+| 安装依赖 | `yarn install` 或 `yarn` | 根据 package.json 安装 |
+| 添加依赖 | `yarn add [包名]` | 例如：`yarn add axios` |
+| 移除依赖 | `yarn remove [包名]` | 移除不需要的包 |
+| 启动开发服务器 | `yarn dev` | 开发模式运行 |
+| 构建生产版本 | `yarn build` | 打包项目 |
+| 预览构建结果 | `yarn preview` | 预览 build 后的项目 |
+
+---
+
+### 七、常见错误及解决方法
+
+#### 错误1：Node.js 版本过低
+```
+error create-vue@3.22.3: The engine "node" is incompatible.
+Expected version "^20.19.0 || >=22.12.0". Got "20.17.0"
+```
+**解决方法**：升级 Node.js 到 20.19+ 或 22.12+
+```bash
+# 使用 nvm（如已安装）
+nvm install 22
+nvm use 22
+
+# 或去官网下载安装包
+https://nodejs.org/
+```
+
+#### 错误2：`'create-vue@latest' 不是内部或外部命令`
+**解决方法**：使用 npx 代替
+```bash
+npx create-vue@latest
+```
+
+#### 错误3：`yarn: command not found`
+**解决方法**：先安装 Yarn
+```bash
+npm install -g yarn
+```
+
+#### 错误4：安装依赖很慢
+**解决方法**：切换到国内镜像源
+```bash
+yarn config set registry https://registry.npmmirror.com
+```
+
+---
+
+### 八、创建流程速记图
+
+```
+1. 安装 Node.js（≥20.19.0）
+         ↓
+2. 安装 Yarn（npm install -g yarn）
+         ↓
+3. 创建项目（yarn create vue@latest）
+         ↓
+4. 配置选项（按需求选择，初学者全选 No 除 ESLint/Prettier）
+         ↓
+5. 进入目录（cd 项目名）
+         ↓
+6. 安装依赖（yarn install）
+         ↓
+7. 启动项目（yarn dev）
+         ↓
+8. 浏览器访问（http://localhost:5173）
+```
+
+---
+
+### 九、验证项目是否创建成功
+
+创建完成后，可以通过以下方式验证：
+
+1. **终端正常**：没有红色错误信息
+2. **访问正常**：浏览器能打开 `localhost:5173`
+3. **看到 Vue 图标**：页面显示 Vue 的欢迎界面
+4. **修改测试**：修改 `App.vue` 保存后页面自动刷新
+
+---
+
+### 十、清理与重新创建
+
+如果创建失败需要重新创建：
+
+```bash
+# 1. 删除项目文件夹
+rm -rf my-vue-app    # macOS/Linux
+rd /s /q my-vue-app  # Windows
+
+# 2. 清除 Yarn 缓存（可选）
+yarn cache clean
+
+# 3. 重新创建
+yarn create vue@latest
+```
+
+---
+
+### 总结：一行命令版
+
+```bash
+# 完整创建流程（复制粘贴即可）
+yarn create vue@latest && cd my-vue-app && yarn install && yarn dev
+```
+
+**记住这 3 个核心命令**：
+- `yarn create vue@latest` - 创建项目
+- `yarn install` - 安装依赖  
+- `yarn dev` - 启动项目
+
+# 作业
+无
\ No newline at end of file
diff --git "a/\347\245\235\346\204\217\350\277\234/20260422-vue\347\275\221\351\241\265\350\276\223\345\207\272.md" "b/\347\245\235\346\204\217\350\277\234/20260422-vue\347\275\221\351\241\265\350\276\223\345\207\272.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a389738f71ead61a972cc88ba5380b51f6923bf8
--- /dev/null
+++ "b/\347\245\235\346\204\217\350\277\234/20260422-vue\347\275\221\351\241\265\350\276\223\345\207\272.md"
@@ -0,0 +1,353 @@
+# 笔记
+
+## Vue 页面输出与定时变化数值总结
+
+### 一、页面输出（在 template 中显示数据）
+
+#### 1. 基础输出语法
+
+```vue
+<template>
+  <div>
+    <!-- 双花括号输出变量 -->
+    <p>{{ message }}</p>
+    <p>{{ count }}</p>
+    <p>{{ user.name }}</p>
+    
+    <!-- 输出表达式计算结果 -->
+    <p>{{ 10 + 20 }}</p>
+    <p>{{ count + 5 }}</p>
+    <p>{{ isActive ? '激活' : '未激活' }}</p>
+    
+    <!-- 输出函数返回值 -->
+    <p>{{ getFullName() }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+// 普通变量（不响应式）
+const message = '你好 Vue'
+
+// ref 响应式变量（推荐）
+const count = ref(10)
+const isActive = ref(true)
+
+// reactive 响应式对象
+const user = reactive({
+  name: '张三',
+  age: 18
+})
+
+// 函数
+function getFullName() {
+  return '李四'
+}
+</script>
+```
+
+#### 2. 输出规则速查表
+
+| 数据类型 | 写法 | 模板中使用 |
+|---------|------|-----------|
+| 普通变量 | `const msg = 'hi'` | `{{ msg }}` |
+| ref 变量 | `const msg = ref('hi')` | `{{ msg }}`（不要写 `.value`）|
+| reactive 对象 | `const user = reactive({name: '张三'})` | `{{ user.name }}` |
+| 函数返回值 | `function getName() { return '李四' }` | `{{ getName() }}` |
+| 表达式 | 计算 | `{{ count + 10 }}` |
+
+---
+
+### 二、定时变化数值
+
+#### 1. setTimeout - 一次性延迟变化（最常用）
+
+```vue
+<template>
+  <div>
+    <p>{{ message }}</p>
+    <button @click="changeAfterDelay">1.5秒后改变</button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const message = ref('原来的值')
+
+function changeAfterDelay() {
+  setTimeout(() => {
+    message.value = '1.5秒后的新值'
+  }, 1500)  // 1500毫秒 = 1.5秒
+}
+</script>
+```
+
+#### 2. 页面加载自动延迟变化
+
+```vue
+<template>
+  <div>
+    <p>{{ status }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const status = ref('加载中...')
+
+onMounted(() => {
+  setTimeout(() => {
+    status.value = '加载完成！'
+  }, 1500)
+})
+</script>
+```
+
+#### 3. setInterval - 重复变化（定时器）
+
+```vue
+<template>
+  <div>
+    <p>计数：{{ count }}</p>
+    <button @click="startTimer">开始</button>
+    <button @click="stopTimer">停止</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, onUnmounted } from 'vue'
+
+const count = ref(0)
+let timer = null  // 保存定时器ID
+
+function startTimer() {
+  if (timer) return  // 防止重复开启
+  
+  timer = setInterval(() => {
+    count.value++
+  }, 1000)  // 每秒加1
+}
+
+function stopTimer() {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+
+// 组件销毁时清理定时器
+onUnmounted(() => {
+  stopTimer()
+})
+</script>
+```
+
+---
+
+### 三、完整示例：综合应用
+
+这是一个结合了页面输出和定时变化的完整例子：
+
+```vue
+<template>
+  <div class="container">
+    <h2>定时变化演示</h2>
+    
+    <!-- 输出各种数据 -->
+    <div class="info">
+      <p>当前消息：{{ message }}</p>
+      <p>计数器：{{ count }}</p>
+      <p>状态：{{ status }}</p>
+      <p>用户：{{ user.name }}（{{ user.age }}岁）</p>
+      <p>下次变化时间：{{ 1.5 - elapsedTime }}秒</p>
+    </div>
+    
+    <!-- 操作按钮 -->
+    <div class="buttons">
+      <button @click="startDelay">1.5秒后改变消息</button>
+      <button @click="startCount">开始计数</button>
+      <button @click="stopCount">停止计数</button>
+      <button @click="resetAll">重置所有</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onUnmounted } from 'vue'
+
+// 响应式数据
+const message = ref('等待改变...')
+const count = ref(0)
+const status = ref('就绪')
+const elapsedTime = ref(0)
+
+const user = reactive({
+  name: '张三',
+  age: 18
+})
+
+// 定时器相关
+let delayTimer = null    // 延迟定时器
+let intervalTimer = null // 重复定时器
+
+// 1.5秒后改变消息
+function startDelay() {
+  // 清除之前的延迟定时器
+  if (delayTimer) {
+    clearTimeout(delayTimer)
+  }
+  
+  status.value = '等待中...'
+  message.value = '等待改变...'
+  elapsedTime.value = 0
+  
+  // 记录经过时间（可选效果）
+  const startTime = Date.now()
+  const timer = setInterval(() => {
+    const elapsed = (Date.now() - startTime) / 1000
+    elapsedTime.value = Math.min(elapsed, 1.5)
+    if (elapsed >= 1.5) {
+      clearInterval(timer)
+    }
+  }, 100)
+  
+  delayTimer = setTimeout(() => {
+    message.value = '1.5秒后改变了！'
+    status.value = '已完成'
+    delayTimer = null
+  }, 1500)
+}
+
+// 开始计数（每秒+1）
+function startCount() {
+  if (intervalTimer) return
+  status.value = '计数中...'
+  
+  intervalTimer = setInterval(() => {
+    count.value++
+  }, 1000)
+}
+
+// 停止计数
+function stopCount() {
+  if (intervalTimer) {
+    clearInterval(intervalTimer)
+    intervalTimer = null
+    status.value = '已停止'
+  }
+}
+
+// 重置所有
+function resetAll() {
+  // 清除所有定时器
+  if (delayTimer) {
+    clearTimeout(delayTimer)
+    delayTimer = null
+  }
+  if (intervalTimer) {
+    clearInterval(intervalTimer)
+    intervalTimer = null
+  }
+  
+  // 重置数据
+  message.value = '等待改变...'
+  count.value = 0
+  status.value = '就绪'
+  elapsedTime.value = 0
+  user.name = '张三'
+  user.age = 18
+}
+
+// 组件销毁时清理所有定时器（重要！）
+onUnmounted(() => {
+  if (delayTimer) clearTimeout(delayTimer)
+  if (intervalTimer) clearInterval(intervalTimer)
+})
+</script>
+
+<style>
+.container {
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+.info {
+  background-color: #f0f0f0;
+  padding: 15px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+.info p {
+  margin: 8px 0;
+}
+.buttons button {
+  margin: 5px;
+  padding: 8px 16px;
+  font-size: 14px;
+  cursor: pointer;
+}
+</style>
+```
+
+---
+
+### 四、核心要点速记
+
+#### 页面输出
+```vue
+{{ 变量名 }}           <!-- 最常用 -->
+{{ 对象.属性 }}        <!-- 输出对象属性 -->
+{{ 表达式 }}           <!-- 计算结果 -->
+{{ 函数名() }}         <!-- 函数返回值 -->
+```
+
+#### 定时变化
+```javascript
+// 一次性延迟（1.5秒 = 1500毫秒）
+setTimeout(() => {
+  变量.value = 新值
+}, 1500)
+
+// 重复执行（每秒1次）
+setInterval(() => {
+  变量.value++
+}, 1000)
+
+// 页面加载时执行
+onMounted(() => {
+  setTimeout(() => {...}, 1500)
+})
+
+// 清理定时器（防止内存泄漏）
+onUnmounted(() => {
+  clearTimeout(timer)
+  clearInterval(timer)
+})
+```
+
+#### 重要提醒
+| 注意事项 | 说明 |
+|---------|------|
+| ref 变量修改 | 要用 `.value`：`count.value = 10` |
+| 模板中输出 ref | 不要写 `.value`：`{{ count }}` |
+| 定时器单位 | 1秒 = 1000毫秒 |
+| 清理定时器 | 组件销毁前必须清理 |
+| 箭头函数 | 使用 `() => {}` 保持 this 指向 |
+
+---
+
+### 五、常见错误与解决
+
+| 错误写法 | 正确写法 | 说明 |
+|---------|---------|------|
+| `message = '新值'` | `message.value = '新值'` | ref 变量需要 `.value` |
+| `{{ count.value }}` | `{{ count }}` | 模板中不需要 `.value` |
+| `setTimeout(function() { this.count++ })` | `setTimeout(() => { count.value++ })` | 使用箭头函数 |
+| 忘记清理定时器 | `onUnmounted(() => clearTimeout(timer))` | 防止内存泄漏 |
+| `setTimeout(..., 1.5)` | `setTimeout(..., 1500)` | 单位是毫秒 |
+
+
+# 作业
+无
\ No newline at end of file
diff --git "a/\347\245\235\346\204\217\350\277\234/20260423-\350\256\241\347\256\227\345\261\236\346\200\247\345\222\214\344\276\246\345\220\254\345\231\250.md" "b/\347\245\235\346\204\217\350\277\234/20260423-\350\256\241\347\256\227\345\261\236\346\200\247\345\222\214\344\276\246\345\220\254\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..3aa0936c4079cfc4376abee3f6f883d83cfc4ff7
--- /dev/null
+++ "b/\347\245\235\346\204\217\350\277\234/20260423-\350\256\241\347\256\227\345\261\236\346\200\247\345\222\214\344\276\246\345\220\254\345\231\250.md"
@@ -0,0 +1,101 @@
+# 笔记
+
+## 一、核心区别
+
+| 特性 | 计算属性 (computed) | 侦听器 (watch) |
+|------|-------------------|----------------|
+| 用途 | 派生数据 | 执行副作用 |
+| 缓存 | ✅ 有 | ❌ 无 |
+| 异步 | ❌ 不支持 | ✅ 支持 |
+| 返回值 | 必须返回 | 可选 |
+| 依赖 | 自动追踪 | 手动指定 |
+
+## 二、一句话总结
+
+- **计算属性**：根据已有数据**计算出新数据**（像公式）
+- **侦听器**：数据变化时**做某件事**（像触发器）
+
+## 三、使用场景
+
+### 用 computed
+- 格式化、过滤、排序数据
+- 多个数据组合计算（全名、总价）
+- 需要缓存的昂贵计算
+
+```js
+const fullName = computed(() => firstName.value + lastName.value)
+const total = computed(() => price.value * quantity.value)
+```
+
+### 用 watch
+- 调用 API、防抖搜索
+- DOM 操作、路由跳转
+- 保存到 localStorage
+- 需要旧值的逻辑
+
+```js
+watch(keyword, debouncedSearch)
+watch(cart, () => localStorage.setItem('cart', JSON.stringify(cart.value)))
+```
+
+## 四、快速选择
+
+```
+需要返回值且无副作用 → computed
+需要做事情（异步/IO/DOM） → watch
+能用 computed 就不用 watch
+```
+
+## 五、注意
+
+- `watch` 默认懒执行，加 `{ immediate: true }` 立即执行
+- 侦听对象需加 `{ deep: true }`
+- `watchEffect` 是更自动的 `watch`，但拿不到旧值
+# 作业
+
+```vue
+
+<script setup>
+import { ref,computed,watch } from 'vue';
+
+let aprice = ref(0);
+let bprice = ref(0);
+
+let message = ref('')
+let count = ref(100)
+
+watch(count, (a,b) => {
+  console.log(a)
+  console.log(b)
+
+  let nul = a * 100
+  console.log(nul);
+})
+
+setTimeout(() => {
+  count.value = 200
+},100)
+
+
+
+
+let allprice = computed(() => {
+  return (Number(bprice.value) + Number(aprice.value));
+})
+
+
+</script>
+
+<template>
+<form action="">
+  A:
+  <input type="text" v-model="aprice">
+  B:
+  <input type="text" v-model="bprice">
+  <p>all: {{allprice}}</p>
+</form>
+
+
+</template>
+
+```
\ No newline at end of file
diff --git "a/\347\245\235\346\204\217\350\277\234/20260424-\346\235\241\344\273\266\345\222\214\345\276\252\347\216\257\346\214\207\344\273\244.md" "b/\347\245\235\346\204\217\350\277\234/20260424-\346\235\241\344\273\266\345\222\214\345\276\252\347\216\257\346\214\207\344\273\244.md"
new file mode 100644
index 0000000000000000000000000000000000000000..8ffb378bc1e015c78eb74f850c50fd16659db52e
--- /dev/null
+++ "b/\347\245\235\346\204\217\350\277\234/20260424-\346\235\241\344\273\266\345\222\214\345\276\252\347\216\257\346\214\207\344\273\244.md"
@@ -0,0 +1,178 @@
+# 笔记
+
+Vue 条件与循环指令精要：
+
+## 条件指令
+| 指令 | 特点 | 适用场景 |
+|------|------|----------|
+| `v-if` | 真正的条件渲染（销毁/重建） | 切换不频繁、运行时条件变化少 |
+| `v-else-if` | 配合 `v-if` 使用 | 多分支条件 |
+| `v-else` | 必须紧跟在 `v-if/v-else-if` 后 | 默认情况 |
+| `v-show` | CSS `display` 切换（始终保留DOM） | 频繁切换、性能要求高 |
+
+```vue
+<div v-if="type === 'A'">A</div>
+<div v-else-if="type === 'B'">B</div>
+<div v-else>C</div>
+<div v-show="isVisible">频繁切换</div>
+```
+
+## 循环指令
+| 指令 | 语法 | 注意 |
+|------|------|------|
+| `v-for` | `v-for="(item, index) in items" :key="item.id"` | **必须绑定唯一 `key`**，提升渲染性能 |
+
+```vue
+<li v-for="(user, i) in users" :key="user.id">{{ i }} - {{ user.name }}</li>
+```
+
+## ⚠️ 核心注意
+- **`v-for` 与 `v-if` 不应同时用在同一元素**（Vue3中 `v-if` 优先级更高，可能达不到预期）。改用计算属性过滤数据。
+- **数组变更检测**：`push/pop/shift/unshift/splice/sort/reverse` 会触发更新；直接通过索引修改 `items[index]=val` 不触发，应用 `splice` 或 `Vue.set`。
+- **遍历对象**：`v-for="(value, key, index) in object"`。
+
+## 对比
+| | `v-if` | `v-show` |
+|--|--------|----------|
+| 初始渲染开销 | 条件假时不渲染 | 始终渲染 |
+| 切换开销 | 销毁/重建开销大 | 仅CSS切换，开销小 |
+| 适用 | 运行时很少改变 | 频繁切换 |
+
+
+# 作业
+```vue
+
+<script setup>
+import { reactive,computed ,ref} from 'vue';
+
+let sutdentall = ref(0);
+
+
+let student= reactive([
+  {
+    studentid: 189000101,
+    studentname: "刘某" ,
+    sex: "男",
+    yuweng: 124,
+    shuxue: 102,
+    yinyu: 90,
+    all: yinyu + shuxue + yuweng
+  },
+
+  {
+    studentid: 189000102,
+    studentname: "关某" ,
+    sex: "男",
+    yuweng: 115,
+    shuxue: 98,
+    yinyu: 95,
+    all: yinyu + shuxue + yuweng
+  },
+
+  {
+    studentid: 189000103,
+    studentname: "张某" ,
+    sex: "男",
+    yuweng: 130,
+    shuxue: 86,
+    yinyu: 68,
+    all: yinyu + shuxue + yuweng
+  },
+
+  {
+    studentid: 189000104,
+    studentname: "诸某" ,
+    sex: "男",
+    yuweng: 125,
+    shuxue: 145,
+    yinyu: 130,
+    all: yinyu + shuxue + yuweng
+  },
+
+  {
+    studentid: 189000105,
+    studentname: "赵某" ,
+    sex: "男",
+    yuweng: 118,
+    shuxue: 132,
+    yinyu: 100,
+    all: yinyu + shuxue + yuweng
+  },
+
+  {
+    studentid: 189000106,
+    studentname: "齐某" ,
+    sex: "男",
+    yuweng: 100,
+    shuxue: 100,
+    yinyu: 100,
+    all: yinyu + shuxue + yuweng
+  }
+])
+
+const headers = [
+  { label: '序号', key: 'index', width: '80px' },
+  { label: '学号', key: 'studentid', width: '120px' },
+  { label: '姓名', key: 'studentname', width: '100px' },
+  { label: '性别', key: 'sex', width: '80px' },
+  { label: '语文', key: 'yuweng', width: '80px' },
+  { label: '数学', key: 'shuxue', width: '80px' },
+  { label: '英语', key: 'yinyu', width: '80px' },
+  { label: '总分', key: 'all', width: '100px' }
+]
+
+let studentwith = computed(() => {
+  return student.map((item,index)  => ({
+    ...item,
+    index: index,
+    all: item.yuweng + item.shuxue + item.yinyu
+  }))
+})
+
+
+</script>
+
+<template>
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <td><input type="text"></td>
+        <td><input type="button" value="查询"></td>
+      </tr>
+      <tr>
+        <td
+          v-for="(header,index) in headers"
+          :key="index"
+          :style="{width: header.width}"
+        >{{header.label}}</td>
+      </tr>
+  </thead>
+
+    <tbody>
+      <tr v-for="(items,x,index) in student">
+        <td>{{index}}</td>
+        <td>{{items.studentid}}</td>
+        <td>{{items.studentname}}</td>
+        <td>{{items.sex}}</td>
+        <td>{{items.yuweng}}</td>
+        <td>{{items.shuxue}}</td>
+        <td>{{items.yinyu}}</td>
+        <td>{{item.all}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+
+
+
+</template>
+
+<style scoped>
+
+</style>
+
+
+```
\ No newline at end of file