vue基础作业实验十

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)等。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

PHP+MySQL 学生信息管理系统

目录 MySQL建表指令 主页面展示 主页面源代码如下 增&#xff1a;添加学生信息 添加html如下 html&#xff1a;主要用于显示网页内容 成功添加后回显 ​编辑 增加php如下 删&#xff1a;删除学生信息 删除html如下 成功删除后回显 删除php如下 改&#xff1a;修改学…

QT网络(四):HTTP通信

Qt 网络模块提供一些类来实现 OSI 七层网络模型中高层的网络协议&#xff0c;如 HTTP、FTP、SNMP 等&#xff0c;这些类主要是 QNetworkRequest、QNetworkAccessManager 和 QNetworkReply。QNetworkRequest 类 通过 URL 发起网络协议请求&#xff0c;其也保存网络请求的信息&a…

Pytorch | 从零构建Vgg对CIFAR10进行分类

Pytorch | 从零构建Vgg对CIFAR10进行分类 CIFAR10数据集Vgg网络结构特点性能应用影响 Vgg结构代码详解结构代码代码详解特征提取层 _make_layers前向传播 forward 训练过程和测试结果代码汇总vgg.pytrain.pytest.py 前面文章我们构建了AlexNet对CIFAR10进行分类&#xff1a; Py…

将4G太阳能无线监控的视频接入电子监控大屏,要考虑哪些方面?

随着科技的飞速发展&#xff0c;4G太阳能无线监控系统以其独特的优势在远程监控领域脱颖而出。这种系统结合了太阳能供电的环保特性和4G无线传输的便捷性&#xff0c;为各种环境尤其是无电或电网不稳定的地区提供了一种高效、可靠的视频监控解决方案。将这些视频流接入大屏显示…

ASP.NET |日常开发中连接Mysql数据库增删改查详解

ASP.NET &#xff5c;日常开发中连接Mysql数据库增删改查详解 前言一、连接 MySQL 数据库1.1 安装和引用相关库1.2 建立数据库连接 二、数据库增删改查操作2.1 插入数据&#xff08;Insert&#xff09;2.2 查询数据&#xff08;Select&#xff09;2.3 更新数据&#xff08;Upda…

Go框架比较:goframe、beego、iris和gin

由于工作需要&#xff0c;这些年来也接触了不少的开发框架&#xff0c;Golang的开发框架比较多&#xff0c;不过基本都是Web"框架"为主。这里稍微打了个引号&#xff0c;因为大部分"框架"从设计和功能定位上来讲&#xff0c;充其量都只能算是一个组件&…

LLaMA-Factory 单卡3080*2 deepspeed zero3 微调Qwen2.5-7B-Instruct

环境安装 git clone https://gitcode.com/gh_mirrors/ll/LLaMA-Factory.git 下载模型 pip install modelscope modelscope download --model Qwen/Qwen2.5-7B-Instruct --local_dir /root/autodl-tmp/models/Qwen/Qwen2.5-7B-Instruct 微调 llamafactory-cli train \--st…

华为ensp--BGP路径选择-AS_Path

学习新思想&#xff0c;争做新青年&#xff0c;今天学习的是BGP路径选择-AS_Path 实验目的: 理解AS_Path属性的概念 理解通过AS_Path属性进行选路的机制 掌握修改AS_Path属性的方法 实验内容: 本实验模拟了一个运营商网络场景&#xff0c;所有路由器都运行BGP协议&#xff…

泛微OA定时任务的设置

泛微OA定时任务 背景 在日常流程开发中&#xff0c;是需要和别的系统进行连接的&#xff0c;比如OA和SAP之间的数据传输。 SAP涉及到的业务数据在生成之后&#xff0c;需要在OA生成对应的流程进行信息的审核&#xff0c;但是毕竟是两个不同的系统&#xff0c;所以数据同步是需…

【Harmony Next】多个图文配合解释DevEco Studio工程中,如何配置App相关内容,一次解决多个问题?

解决App配置相关问题列表 1、Harmony Next如何配置图标&#xff1f; 2、Harmony Next如何配置App名称&#xff1f; 3、Harmony Next如何配置版本号&#xff1f; 4、Harmony Next如何配置Bundle ID? 5、Harmony Next如何配置build号&#xff1f; 6、Harmony Next多语言配置在哪…

如何从0构建一个flask项目,直接上实操!!!

项目结构 首先&#xff0c;创建一个项目目录&#xff0c;结构如下&#xff1a; flask_app/ │ ├── app.py # Flask 应用代码 ├── static/ # 存放静态文件&#xff08;如CSS、JS、图片等&#xff09; │ └── style.css # 示例…

计算机网络B重修班-期末复习

[TOC] (计算机网络B重修班-期末复习&#xff09; 一、单选 &#xff08;20题&#xff0c;1分/题&#xff0c;共20分&#xff09; 二、判断 &#xff08;10题&#xff0c;1分/题&#xff0c;共10分&#xff09; 三、填空 &#xff08;10题&#xff0c;1分/题&#xff0c;共10…

js日期时区问题

东八区与0时区 东八区 我们所在地域使用的是 东八区 时区&#xff0c;所以平常使用的电脑设置的多是东八时区 js获取的时间格式 0时区 0时区 也叫 协调世界时 js获取的时间格式 数据库读取时间数据 平常从数据读取的时间默认是0时区的&#xff0c;成以下格式&#xff1a; 2024…

Ubantu22系统安装Miniconda3

1、Anaconda和Miniconda异同 清华源镜像的Miniconda3和Anaconda都是用于管理Python环境和软件包的工具&#xff0c;但它们之间存在一些关键的不同之处。下面将分别介绍它们的特点以及使用清华源镜像的差异。 相同点&#xff1a; &#xff08;1&#xff09;功能相似&#xff1a…

锂电池SOH预测 | 基于BiGRU双向门控循环单元的锂电池SOH预测,附锂电池最新文章汇集

锂电池SOH预测 | 基于BiGRU双向门控循环单元的锂电池SOH预测&#xff0c;附锂电池最新文章汇集 目录 锂电池SOH预测 | 基于BiGRU双向门控循环单元的锂电池SOH预测&#xff0c;附锂电池最新文章汇集预测效果基本描述程序设计参考资料 预测效果 基本描述 锂电池SOH预测 | 基于Bi…

安装opnet14.5遇到的问题

安装opnet遇到的问题 我是按照这个教程来安装的。 然后遇到了两个问题&#xff1a; 1、“mod_dirs”目录问题 Can’t enable ETS scripting support due to missing files。 This is likely because:<opnet_release_dir>\sys\lib is notinclude in the “mod_dirs” pre…

以腾讯混元模型为例,在管理平台上集成一个智能助手

背景 前几天&#xff0c;公司的同事们一起吃了个饭&#xff0c;餐桌上大家聊到大模型的落地场景。我个人在去年已经利用百度千帆平台写过案例&#xff0c;并发过博客&#xff08;传送门&#x1f449;&#xff1a;利用文心千帆打造一个属于自己的小师爷&#xff09;&#xff0c…

软件实验室认可|实验室比对的形式与方法

实验室比对是软件测试实验室在申请软件实验室认可必须要做的一类质量控制活动。实验室比对包括实验室间比对&#xff0c;和实验室内比对。实验室间比对指的是按照预先规定的条件&#xff0c;由两个或多个实验室对相同或类似的物品进行测量或检测的组织、实施和评价。实验室内比…

酷克数据携手江西移动入选“星河(Galaxy)”数据库潜力案例

2024 年 12 月 18 - 19 日&#xff0c;为推动打造行业交流平台&#xff0c;驱动产业创新共荣&#xff0c;大数据技术标准推进委员会以“数据重塑价值 智能链接未来”为主题&#xff0c;在北京召开为期两天的“2024 数据资产管理大会”。 在会上&#xff0c;第八届大数据“星河&…

【Verilog】UDP用户原语

User-defined primitives 概述基本语法组合逻辑的UDP时序逻辑的UDPUDP 符号表 Verilog HDL&#xff08;简称 Verilog &#xff09;是一种硬件描述语言&#xff0c;用于数字电路的系统设计。可对算法级、门级、开关级等多种抽象设计层次进行建模。 Verilog 不仅定义了语法&…