当前位置：首页 > news >正文

vue基础作业实验十

news 来源：原创 2025/6/8 6:29:05

vue基础作业实验十

实验要求
- 案例要点：
- - 代码以及思考
  - - style部分
    - Vue.js 部分
    - Vue 实例部分

这段代码是一个基于 Vue.js 的静态页面，功能包括商品品牌的添加、删除和搜索。

实验要求

一、实验的基本内容
（1）Vue模板语法。

（2）Vue条件渲染与列表渲染。

（3）事件处理。

（4）表单输入绑定。

（5）组件基础。

二、实验的基本要求

（1）了解VUE框架的使用。

（2）掌握VUE模板语法。

（3）熟练掌握条件渲染与列表渲染。

（4）掌握表单的双向绑定。

（5）掌握事件处理设置。

（6）掌握简单组件的应用。

三、实验的基本仪器设备和耗材

计算机、VSCode
在这里插入图片描述

案例要点：

商品列表由已有数据渲染生成。

实现商品的添加、删除、搜索功能。

− 添加商品时，时期为当前系统日期。

− 删除商品时，弹出确认对话框，经用户确认删除后，删除商品，否则不操作。

− 能够根据商品名称的部分字词进行模糊搜索，确认搜索后，列表显示满足条件商品；退出搜索模式后，展示全部商品；如果没有符合搜索条件商品，则显示“没有商品数据”

代码以及思考

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>静态页面</title><style>#app {width: 600px;margin: 10px auto;}.tb {border-collapse: collapse;width: 100%;}.tb th {background-color: #0094ff;color: white;}.tb td,.tb th {padding: 5px;border: 1px solid black;text-align: center;}.add-form,.search-form {margin-bottom: 10px;}.delete-btn {color: red;text-decoration: none;}</style><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head><body><div id='app'><div class='add-form'><label for="newBrandName">商品名称：</label><input id="newBrandName" type="text" v-model='newBrandName'><input type="button" value="添加" @click="addBrand"></div><div class='search-form'><label for="search">搜索商品：</label><input id="search" type='text' v-model='searchQuery' placeholder="请输入搜索条件"><input type="button" value="搜索" @click="searchBrands"> <!-- 修改此处，绑定正确的搜索方法 --></div><table class='tb'><tr><th>编号</th><th>品牌名称</th><th>创立时间</th><th>操作</th></tr><tr v-for="(brand, index) in filteredBrands" :key='index'><td>{{ index + 1 }}</td><td>{{ brand.brandName }}</td><td>{{ brand.time }}</td><td><a href="#" class="delete-btn" @click.prevent="deleBrand(index)">删除</a></td></tr><tr v-if="filteredBrands.length === 0"><td colspan='4'>没有品牌数据</td></tr></table></div><script>var brands = [{ brandName: 'TCL', time: '2018-1-1' },{ brandName: '小米', time: '2018-1-1' },{ brandName: 'apple', time: '2018-1-1' }];new Vue({el: '#app',data: {brands: brands,newBrandName: '',searchQuery: ''},computed: {filteredBrands() {if (this.searchQuery) {return this.brands.filter(brand =>brand.brandName.toLowerCase().includes(this.searchQuery.toLowerCase()));}return this.brands;}},methods: {addBrand() {this.brands.unshift({brandName: this.newBrandName,time: new Date().toISOString().slice(0, 10)});this.newBrandName = '';},searchBrands() {// 这里可以根据实际需求完善更复杂的搜索逻辑，目前简单依赖计算属性的筛选// 比如可以添加一些提示信息等逻辑处理，这里暂保持最简形式},deleBrand(index) {if (confirm('确认删除吗？')) {this.brands.splice(index, 1);}}}});</script><hr>202217020014&copy;2024.12
</body></html>

效果
在这里插入图片描述
从整体上来看是由三部分组成
在<div id='app'></div>这一容器里

<div class='add-form'></div>
<div class='search-form'></div>
<table class='tb'></div>

代码相关知识
表格、表单以及按钮等的样式设置

style部分

1. #app 样式

#app {width: 600px;margin: 10px auto;
}

#app: 选择具有 id=“app” 的 DOM 元素（即 Vue 实例挂载的容器）。
width: 600px;: 设置容器的宽度为 600px。
margin: 10px auto;: 设置容器的上下边距为 10px，左右自动居中。这样会使得容器在页面上居中显示。

回顾一下之前的知识margin: 10px auto;为什么居中

margin: 10px auto; 的作用是使元素在水平上居中，并在垂直方向上提供一定的外边距。
下面详细解释一下这段 CSS 的工作原理，margin: 10px auto; 的作用。

这个 CSS 规则分为两个部分：

10px: 设置元素上下（垂直方向）的外边距为 10px。
auto: 设置元素左右（水平）方向的外边距为 auto，这就是居中的关键。

为什么 auto 会居中
当你设置 margin-left 和 margin-right 为 auto 时，浏览器会自动计算左右边距，使得元素在父容器中水平居中。这是通过将父容器的剩余空间平均分配给左右边距来实现的。这样，元素的左右两侧就会自动对称地分布在父容器的中间。

具体情况
父容器需要有明确的宽度：为了让元素居中，父容器必须有一个明确的宽度。如果父容器的宽度是 100%（即占据整个屏幕宽度），那么 auto 会根据该父容器的宽度，计算出元素的左右外边距并使其居中。

元素本身需要有固定宽度：元素本身需要有明确的宽度，否则浏览器无法计算剩余空间来进行居中。
这里的元素是指子元素
比如说

<div class="container"><div class="box">内容</div>
</div>

.container {width: 600px;background-color: lightgrey;
}.box {width: 200px;margin: 10px auto;  /* 垂直 10px, 水平自动居中 */background-color: lightblue;
}

父容器 .container 的宽度是 600px。
子元素 .box 的宽度是 200px。
通过 margin: 10px auto;，auto 会使 .box 在父容器内水平居中，同时上下外边距为 10px。
2. .tb 样式

.tb {border-collapse: collapse;width: 100%;
}

.tb: 选择所有类名为 tb 的元素，主要用于表格。
border-collapse: collapse;: 设置表格的边框合并，去掉表格单元格之间的间隙，使得表格的边框看起来更紧凑。
width: 100%;: 设置表格的宽度为 100%，使表格适应其父容器的宽度。
没写border-collapse: collapse
在这里插入图片描述
写了

3. .tb th 样式

.tb th {background-color: #0094ff;color: white;
}

.tb th: 选择表格中的所有表头单元格（）。
background-color: #0094ff;: 设置表头的背景色为蓝色 (#0094ff)。
color: white;: 设置表头文本的颜色为白色。
4. .tb td, .tb th 样式

.tb td,
.tb th {padding: 5px;border: 1px solid black;text-align: center;
}

.tb td, .tb th: 选择表格中的所有单元格（和）。
padding: 5px;: 设置单元格的内边距为 5px，使单元格内容与边框之间有一些空隙。
border: 1px solid black;: 设置单元格的边框为 1px 的黑色实线。
text-align: center;: 设置单元格内容居中对齐。
5. .add-form, .search-form 样式

.add-form,
.search-form {margin-bottom: 10px;
}

.add-form, .search-form: 选择所有类名为 add-form 和 search-form 的元素，分别用于品牌添加表单和品牌搜索表单。
margin-bottom: 10px;: 设置表单底部的外边距为 10px，使得每个表单之间有一定的间隔，提升页面可读性。
6. .delete-btn 样式

.delete-btn {color: red;text-decoration: none;
}

.delete-btn: 选择所有类名为 delete-btn 的元素，通常应用于删除按钮。
color: red;: 设置删除按钮的文本颜色为红色，强调删除操作。
text-decoration: none;: 取消删除按钮默认的下划线（假如按钮是链接的话），使得它看起来更简洁。

Vue.js 部分

<div class='add-form'><label for="newBrandName">商品名称：</label><input id="newBrandName" type="text" v-model='newBrandName'><input type="button" value="添加" @click="addBrand">
</div>

<label>：为输入框提供一个标签，显示 “商品名称”。
<input id="newBrandName" type="text" v-model='newBrandName'>：定义一个文本输入框，使用 v-model 绑定 Vue 实例中的 newBrandName 数据模型。当用户输入时，newBrandName 会自动更新。
<input type="button" value="添加" @click="addBrand">：定义一个按钮，点击时触发 Vue 实例中的 addBrand 方法，用于添加品牌。

<div class='search-form'><label for="search">搜索商品：</label><input id="search" type='text' v-model='searchQuery' placeholder="请输入搜索条件"><input type="button" value="搜索" @click="searchBrands">
</div>

<label>：为输入框提供标签，显示 “搜索商品”。
<input id="search" type='text' v-model='searchQuery' placeholder="请输入搜索条件">：定义一个文本输入框，使用 v-model 绑定 Vue 实例中的 searchQuery 数据模型。
<input type="button" value="搜索" @click="searchBrands">：点击按钮触发 searchBrands 方法，这个方法本来是为空的，但你可以扩展它来执行更复杂的搜索。

<table class='tb'><tr><th>编号</th><th>品牌名称</th><th>创立时间</th><th>操作</th></tr><tr v-for="(brand, index) in filteredBrands" :key='index'><td>{{ index + 1 }}</td><td>{{ brand.brandName }}</td><td>{{ brand.time }}</td><td><a href="#" class="delete-btn" @click.prevent="deleBrand(index)">删除</a></td></tr><tr v-if="filteredBrands.length === 0"><td colspan='4'>没有品牌数据</td></tr>
</table>

<table class='tb'>：定义一个表格，类名为 tb，用于展示品牌信息。
<tr>：定义表格的行，每一行表示一个品牌的信息。
v-for="(brand, index) in filteredBrands"：Vue.js 的指令，用于循环渲染 filteredBrands 数组。每一行展示一个品牌的数据。
{{ index + 1 }}：显示品牌的编号，从 1 开始。
{{ brand.brandName }}：显示品牌的名称。
{{ brand.time }}：显示品牌的创立时间。
<a href="#" class="delete-btn" @click.prevent="deleBrand(index)">删除</a>：提供一个删除按钮，点击时触发 deleBrand 方法，删除对应品牌。
v-if="filteredBrands.length === 0"：当 filteredBrands 数组为空时，显示 “没有品牌数据”。

Vue 实例部分

var brands = [{ brandName: 'TCL', time: '2018-1-1' },{ brandName: '小米', time: '2018-1-1' },{ brandName: 'apple', time: '2018-1-1' }
];

brands 数组包含了初始的品牌数据，每个品牌对象有 brandName 和 time 两个属性，分别代表品牌名称和创立时间。

new Vue({el: '#app',data: {brands: brands,newBrandName: '',searchQuery: ''},computed: {filteredBrands() {if (this.searchQuery) {return this.brands.filter(brand =>brand.brandName.toLowerCase().includes(this.searchQuery.toLowerCase()));}return this.brands;}},methods: {addBrand() {this.brands.unshift({brandName: this.newBrandName,time: new Date().toISOString().slice(0, 10)});this.newBrandName = '';},searchBrands() {// 这里可以根据实际需求完善更复杂的搜索逻辑，目前简单依赖计算属性的筛选},deleBrand(index) {if (confirm('确认删除吗？')) {this.brands.splice(index, 1);}}}
});

new Vue({ … })：创建一个新的 Vue 实例。
el: ‘#app’：将 Vue 实例挂载到 id 为 app 的 DOM 元素上。
data：存储 Vue 实例的响应式数据。包含 brands（品牌数据数组）、newBrandName（新增品牌名称）和 searchQuery（搜索框输入内容）。
computed：
filteredBrands：一个计算属性，用来过滤出符合搜索条件的品牌数据。如果 searchQuery 非空，则根据品牌名称进行大小写不敏感的搜索，否则返回全部品牌。
methods：定义了 Vue 实例中的方法。
addBrand：用来向 brands 数组中添加一个新的品牌，品牌的名称来自 newBrandName，创立时间是当前时间。
searchBrands：搜索方法，但当前实现是基于计算属性的。
deleBrand：删除指定索引位置的品牌，并通过 confirm 确认操作。
总结
本次实验让我深入学习和实践了 Vue.js 的核心概念，包括：

双向数据绑定 (v-model)：学习了如何利用 Vue.js 实现输入框与数据之间的双向绑定，使得用户输入和数据实时同步。
动态渲染数据 (v-for)：通过 v-for 指令学习如何根据数据渲染页面元素，特别是列表渲染和条件渲染。
事件绑定 (@click)：学习了如何为 HTML 元素添加事件监听器，以响应用户的操作，如点击按钮时执行特定的 JavaScript 方法。
计算属性 (computed)：通过计算属性处理了品牌列表的过滤问题，避免了在视图中直接操作数据。
Vue 实例的生命周期：学习了 Vue.js 中的实例生命周期，如何管理和使用组件的生命周期钩子（如 mounted 和 destroyed）等。

vue基础作业实验十

vue基础作业实验十实验要求案例要点：代码以及思考style部分Vue.js 部分Vue 实例部分这段代码是一个基于 Vue.js 的静态页面，功能包括商品品牌的添加、删除和搜索。实验要求一、实验的基本内容 （1）Vue模板语法。 &#xff08…...

编程日记 2025/6/4 6:02:21

冒泡排序（JAVA）

package com.guangyunl.f_array;import java.util.Random; import java.util.Scanner;// 数组的冒泡排序 // 冒泡排序法是采用数组中相邻元素进行比较换位 public class Demo02Bubble {public static void main(String[] args) {Demo02Bubble demo02Bubble new Demo02Bubble()…...

编程日记 2025/6/1 5:55:16

如何测量分辨率

一、什么是分辨率？ 分辨率指的是分清物体细节的能力。分辨率是一个成像系统还原空间频率的能力。一些人只是简单的用分辨率去描述极限分辨率，但是相机在在不同的对比度的情况下还原低，中和高频率的能力，也可以显示全面综合的信息。…...

编程日记 2025/6/1 15:46:46

【Mysql索引优化】索引优化的最佳实现

文章目录【Mysql优化】索引优化的最佳实现1. 全值匹配：索引的最佳使用方式2. 最左前缀法则3. 尽量使用覆盖索引：优化查询性能。减少 select \* 语句4. 范围查询优化5. 不在索引列上做任何操作（计算、函数、（自动or手动&#xff0…...

编程日记 2025/6/3 1:48:39

centos使用mkisofs构建无人值守镜像（附官方学习文档）

安装mkisofs yum install -y mkisofs 挂载镜像并确认并拷贝文件(/mnt 为我们的工作目录) 1.3 准备自动应答文件(保存为 ins.ks) 修改系统引导实际上就是添加inst.ks 这个引导参数传递应答文件传统模式引导 UEFI模式引导打包镜像通用选项 -v：启用详细模式&a…...

编程日记 2025/6/3 0:21:51

Python获取当前系统中可用的串口设备

import serial.tools.list_portsdef checkDevice(self):port_data []for port in serial.tools.list_ports.comports():port_data.append(port.description)if port_data:for devInfo in port_data:self.toolLogPrinting(可用设备 devInfo)RET Trueelse:self.toolLogPrinti…...

编程日记 2025/6/1 1:00:21

基于蓝牙通信的手机遥控智能灯（论文+源码）

1.系统设计灯具作为人们日常生活的照明工具为人们生活提供光亮，本次基于蓝牙通信的手机遥控智能灯设计功能如下： （1）用户可以通过蓝牙通信模块的作用下，在手机端遥控切换智能灯不同的工作模式； &#x…...

编程日记 2025/6/4 8:19:33

【Prometheus 】【实战篇（五）】深入解析 Prometheus 监控指标类型：Counter、Gauge、Histogram 和 Summary

Prometheus 提供了四种核心的指标类型，分别是 Counter（计数器）、Gauge（仪表）、Histogram（直方图）和 Summary（摘要）。这些指标类型在客户端库中有具体的使用说明&#xff…...

编程日记 2025/6/4 9:53:37

进程间通信方式---消息队列（System V IPC）

进程间通信方式—消息队列（System V IPC） 文章目录进程间通信方式---消息队列（System V IPC）消息队列1.消息队列进程间通信原理2.msgget 系统调用3.msgsnd 系统调用4.msgrcv 系统调用5.msgctl 系统调用6.函数使用案例7.实现生产者…...

编程日记 2025/6/4 14:12:11

【笔记】深度学习模型评估指标

推荐链接： （0）多分类器的评价指标 （1）泛化误差的评价方法：【机器学习】模型评估与选择（留出法、交叉验证法、查全率、查准率、偏差、方差） （2）机器学习&…...

编程日记 2025/6/2 3:43:26

Python语法之列表（包含检测练习）

看完后有没有学会呢？主页有一个列表知识小检测^V^ 关注我更新更多初学实例主页还有字典的，这个系列会持续更新列表列表中的查找数据（index,count,len) 一列表的格式【数据1，数据2， 】 index():返回指定数据…...

编程日记 2025/6/4 16:47:38

气象与旅游之间的关系，如果借助高精度预测提高旅游的质量

气象与旅游之间存在密切的关系，天气条件直接影响旅游者的出行决策、旅游体验和安全保障。通过高精度气象预测技术，可以有效提升旅游质量，为游客和旅游行业带来显著的优势。 1. 提高游客出行决策效率个性化天气服务：基于高精度气象预测，旅游平台可以提供个性化的天气预报服…...

编程日记 2025/5/31 1:35:16

JVM（Java虚拟机）分区详情

JVM（Java虚拟机）运行时数据区是Java虚拟机的内存管理模型，它包括了多个关键的内存区域，这些区域各自承担着不同的职责，共同支持着Java程序的运行。以下是JVM运行时数据区的详细介绍：一、整体概述 JVM运行时数据区按照线程占用的情况可以分为两类：线程共享和线程独享。…...

编程日记 2025/5/30 3:44:05

计算机组成原理的学习笔记(2)--数据表示与运算·其二逻辑门和加减乘

学习笔记前言本文主要是对于b站尚硅谷的计算机组成原理的学习笔记，仅用于学习交流。 1. 逻辑门逻辑门是数字电路中用于执行基本逻辑运算的组件。每种逻辑门都有独特的功能和特性： 与门（AND Gate）： 符号&#xff1…...

编程日记 2025/5/30 19:44:56

数据科学与SQL：如何利用本福特法则识别财务数据造假？

目录 0 本福特法则介绍 1 数据准备 2 问题分析步骤1：提取首位数: 步骤2：计算首位数字的实际频率分布 <...

编程日记 2025/5/6 9:02:40

Mapbox-GL 的源码解读的一般步骤

Mapbox-GL 是一个非常优秀的二三维地理引擎，随着智能驾驶时代的到来，应用也会越来越广泛，关于mapbox-gl和其他地理引擎的详细对比（比如CesiumJS），后续有时间会加更。地理首先理解 Mapbox-GL 的源码是一项复…...

编程日记 2025/6/3 10:08:55

常见网络命令

个人主页：C忠实粉丝欢迎点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝原创常见网络命令收录于专栏【计算机网络】本专栏旨在分享学习计算机网络的一点学习笔记，欢迎大家在评论区交流讨论💌 目录 Ping 命令 …...

编程日记 2025/6/3 15:36:54

Ubuntu上如何部署Nginx？

环境： Unbuntu 22.04 问题描述： Ubuntu上如何部署Nginx？ 解决方案： 在Ubuntu上部署Nginx是一个相对简单的过程，以下是详细的步骤指南。我们将涵盖安装Nginx、启动服务、配置防火墙以及验证安装是否成功。 1. 更新…...

编程日记 2025/5/31 16:52:59

微店商品详情API：获取商品信息的高效途径

引言在电商领域，获取商品详情是开发者和商家进行数据分析、精准营销和店铺管理的重要一环。微店作为知名的电商平台，提供了丰富的API接口供开发者使用，其中商品详情API接口尤为关键。本文将详细介绍如何使用微店API接口获取商品详情&#x…...

编程日记 2025/6/4 6:30:36

编程语言注释的方式

Python 单行注释 # 这是一个单行注释多行注释（本质上是跨行字符串） 这是一个多行注释的示例。它可以跨越多行。 """这是一个多行注释的示例。它可以跨越多行。 """ C 单行注释 // 这是一个单行注释多行注释 /*这是…...

编程日记 2025/6/3 22:59:30

抓住节假日的机会调整ASO优化策略

节日季和全年的特殊活动为提高应用程序的知名度和下载量提供了独特的机会。忽略节假日意味着错过这些有限的扩大用户群的机会。相反，调整您的应用商店优化 (ASO) 策略以适应这些高流量时段至关重要。以下是如何在假期期间最大限度地提高应用程序的性能。一、为什么…...

编程日记 2025/6/2 17:17:27

AOI外观缺陷检测机

主要功能： 快速检测产品装配缺陷，包括螺丝、元器件、端子排线、二维码、一维条码、识别读码、产品外观 Logo缺陷以及产品标签、字符缺陷检测等产品的缺陷检测。设备优势：1.采用轻型可移动支架，可以快速对接产线工艺工序&am…...

编程日记 2025/6/3 12:54:56

BERT模型

目录 1.BERT介绍2.BERT框架2.1 Embedding2.2 Transformer Encoder 3.BERT可视化4.注意力六种模式4.1 模式1：注意下一个词4.2 模式2：注意前一个词4.3 模式3：注意相同或相关的单词4.4 模式4：注意“其他”句子中相同或相关词4.5 模式…...

编程日记 2025/6/4 3:54:09

Ubuntu22.04上安装esp-idf

一、安装准备# 建议使用Ubuntu 20.04 或 Ubuntu 22.04 操作系统为了在 Ubuntu 22.04 中使用 esp-idf，需要安装一些依赖包 sudo apt-get install git wget flex bison gperf python3\python3-pip python3-venv cmake ninja-build ccache\libffi-dev libssl-dev dfu…...

编程日记 2025/5/29 7:39:00

Synchronous Serial Port 协议详解

1、简介 Synchronous Serial Port (SSP) ，基于下图文档的设计标准 1.1、包含3种数据帧格式： a Motorola SPI-compatible interface（以下简称SPI）a Texas Instruments synchronous serial interface（简写SSI&#xff…...

编程日记 2025/5/31 10:30:01

BSM和BMS什么区别？

BSM BSM（Battery System Manager）是指用于管理和控制电动车辆的电池系统的设备，其功能包括监测电池状态、控制充放电过程、保护电池安全等。 BMS BMS（Battery Management System）是指用于监测、控制和保护电池组的设…...

编程日记 2025/6/4 0:16:35

基于海思soc的智能产品开发（巧用mcu芯片）

编程日记 2025/5/31 16:52:38

R语言混合模型回归GBTM群组轨迹模型绘图可视化研究

全文链接：https://tecdat.cn/?p38581 在回归分析的广袤领域中，面对具有多条未知函数线的复杂数据时，传统方法常常捉襟见肘。混合模型作为一种强有力的分析手段应运而生，其在处理此类复杂情境时展现出独特的优势与潜力&#xff08…...

编程日记 2025/6/3 20:55:28

Flink2.0未来趋势中需要注意的一些问题

手机打字，篇幅不长，主要讲一下FFA中关于Flink2.0的未来趋势，直接看重点。 Flink Forward Asia 2024主会场有一场关于Flink2.0的演讲，很精彩，官方也发布了一些关于Flink2.0的展望和要解决的问题。 1.0时代和2.0时代避免…...

编程日记 2025/6/1 2:50:50

android recycleview 中倒计时数据错乱

原因 recyceleview 当页面划出屏幕外后，默认会有两条进入缓存区，这些item的结构会被保存，数据被清除，方便其他新进入屏幕的数据复用item，超过两条外的item会进入缓存池被完全销毁重用。如果我们的页面上有editText 或…...

编程日记 2025/6/2 7:47:32

康冠科技嵌入式面试题及参考答案

LCD 驱动你自己做了哪些内容？在 LCD 驱动开发中，首先是硬件层面的理解。需要仔细研究 LCD 的数据手册，明确其引脚定义，包括电源引脚、数据引脚、控制引脚等。比如，对于常见的 RGB 接口 LCD，要清楚哪几个引脚是用于传输红、绿、蓝三种颜色的数据，以及像 VSYNC（垂直同步…...

编程日记 2025/5/31 8:51:58

FreeRTOS的任务调度

1.启动任务调度器 vTaskStartScheduler void vTaskStartScheduler( void ) { BaseType_t xReturn;/* Add the idle task at the lowest priority. */#if ( INCLUDE_xTaskGetIdleTaskHandle 1 ){/* Create the idle task, storing its handle in xIdleTaskHandle so it canbe …...

编程日记 2025/6/4 10:20:19

vue基础作业实验十

实验要求

案例要点：

代码以及思考

style部分

Vue.js 部分

Vue 实例部分

相关文章：