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

Vue——案例01(查询用户)

news 文章来源：https://blog.csdn.net/weixin_52874695/article/details/137072534 2024/11/7 11:26:45

目录

一、案例实现页面

二、案例实现效果

1. 查询效果

2. 年龄升序

3. 年龄降序

4. 原顺序

三、案例实现思路

四、完整代码

一、案例实现页面

实现用户对年龄的升降的排序、根据名字搜索用户信息以及重新返回原序列

二、案例实现效果

1. 查询效果

2. 年龄升序

3. 年龄降序

4. 原顺序

三、案例实现思路

1. 定义界面所需标签样式

    <div id="app"><h2>查询用户:</h2><input type="text" placeholder="请输入名字"/><button>年龄升序</button><button>年龄降序</button><button>原顺序</button><table border="1px"><tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th></tr></table></div>

2. 定义界面所需数据

        data: function () {return {datas: [{ id: 1, name: "李思思", sex: "女", age: 20 },{ id: 2, name: "王五", sex: "男", age: 24 },{ id: 3, name: "张三", sex: "男", age: 22 },{ id: 4, name: "李四", sex: "男", age: 21 },],inputname: "",sortType: 0, //0表示原顺序,1表示升序,2表示降序};}

3. 将数据循环放置在标签中

        <tr v-for="(data,index) in fillDatas" :key="data.id"><td>{{data.id}}</td><td>{{data.name}}</td><td>{{data.sex}}</td><td>{{data.age}}</td></tr>

4. 分别给每个按钮绑定相应的事件

0表示原顺序,1表示升序,2表示降序

      <button @click="sortType=1">年龄升序</button><button @click="sortType=2">年龄降序</button><button @click="sortType=0">原顺序</button>

5. 将事件全部定义在计算属性中

filter ()方法创建给定数组的一部分的浅副本，过滤掉给定数组中通过所提供函数实现的测试的元素

过滤数据获取数组对象

sort() 方法对原列表进行排序，如果指定参数，则使用比较函数指定的比较函数。

indexOf ()方法返回给定元素在数组中的第一个索引，如果不存在，则返回-1。

        computed: {//data中数据有变化,计算属性就在监听fillDatas() {//filter ()方法创建给定数组的一部分的浅副本，过滤掉给定数组中通过所提供函数实现的测 试的元素//过滤数据获取数组对象let arr = this.datas.filter((data) => {return data.name.indexOf(this.inputname) > -1;});if (this.sortType == 1) {//升序arr.sort(function (d1, d2) {return d1.age - d2.age;});}if (this.sortType == 2) {//降序arr.sort(function (d1, d2) {return d2.age - d1.age;});}return arr;},}

四、完整代码

<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>查询用户</title></head><body><div id="app"><h2>查询用户:</h2><input type="text" placeholder="请输入名字" v-model="inputname" /><button @click="sortType=1">年龄升序</button><button @click="sortType=2">年龄降序</button><button @click="sortType=0">原顺序</button><table border="1px"><tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th></tr><tr v-for="(data,index) in fillDatas" :key="data.id"><td>{{data.id}}</td><td>{{data.name}}</td><td>{{data.sex}}</td><td>{{data.age}}</td></tr></table></div><script type="text/javascript" src="../js/vue.global.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata: function () {return {message: "Hello Vue",datas: [{ id: 1, name: "李思思", sex: "女", age: 20 },{ id: 2, name: "王五", sex: "男", age: 24 },{ id: 3, name: "张三", sex: "男", age: 22 },{ id: 4, name: "李四", sex: "男", age: 21 },],inputname: "",sortType: 0, //0表示原顺序,1表示升序,2表示降序};},//计算属性computed: {//data中数据有变化,计算属性就在监听fillDatas() {//filter ()方法创建给定数组的一部分的浅副本，过滤掉给定数组中通过所提供函数实现的测试的元素//过滤数据获取数组对象let arr = this.datas.filter((data) => {return data.name.indexOf(this.inputname) > -1;});if (this.sortType == 1) {//升序arr.sort(function (d1, d2) {return d1.age - d2.age;});}if (this.sortType == 2) {//降序arr.sort(function (d1, d2) {return d2.age - d1.age;});}return arr;},},});// 2.挂载appapp.mount("#app");</script><style></style></body>
</html>

相关文章：

Vue——案例01(查询用户)

目录 一、案例实现页面 二、案例实现效果 1. 查询效果 2. 年龄升序 3. 年龄降序 4. 原顺序 三、案例实现思路 四、完整代码 一、案例实现页面 实现用户对年龄的升降的排序、根据名字搜索用户信息以及重新返回原序列 二、案例实现效果 1. 查询效果 2. 年龄升序 3. 年龄…...

编程日记 2024/4/2 18:35:58

【数据结构】线性表

文章目录 前言线性表的定义和基本操作1.线性表的定义2.线性表的基本操作 顺序表的定义1.静态分配方式2.动态分配方式 顺序表的插入和删除1.顺序表的插入2.顺序表的删除 顺序表的查找1.按位查找&#xff08;简单&#xff09;2.按值查找 单链表的定义1.代码定义一个单链表2.不带头…...

编程日记 2024/4/2 18:27:50

983. 最低票价 C++

class Solution { public:int mincostTickets(vector<int>& days, vector<int>& costs) {// 状态定义&#xff1a; f[i] 表示 i 天及之后 旅行所需的最小花费int f[366]{};// 标注哪些天 出门for (int v: days) f[v] 1;// 由于状态转移是逆向的 所以倒序 …...

编程日记 2024/4/2 18:23:45

紫光展锐P7885核心板详细参数介绍_5G安卓智能模块开发方案

紫光展锐P7885核心板采用了先进的6nm EUV制程工艺&#xff0c;集成了高性能的应用处理器和金融级安全解决方案&#xff0c;为用户带来了全新的性能体验。 P7885核心板搭载了先进的6nm制程工艺SoC P7885&#xff0c;其中包含四核A76和四核A55&#xff0c;主频可达2.7Ghz&#xf…...

编程日记 2024/4/2 18:17:38

Keil MDK 5.37 及之后版本 安装 AC5(ARMCC) 编译器详细步骤

由于 Keil 5.37 及之后版本不再默认安装 AC5(ARMCC) 编译器&#xff0c;这就会导致由 AC5 编译的工程无法正常编译&#xff0c;往往输出窗口会提示以下信息&#xff1a;*** Target ‘STM32xxxx‘ uses ARM-Compiler ‘Default Compiler Version 5‘ which is not available. —…...

编程日记 2024/4/2 18:16:37

速盾：cdn配置ssl

CDN&#xff08;Content Delivery Network&#xff09;是一种内容分发网络&#xff0c;它的作用是将原始服务器上的内容分发到全球各地的边缘节点上&#xff0c;以提高用户访问速度和稳定性。随着数据传输的安全性要求越来越高&#xff0c;配置SSL&#xff08;Secure Sockets L…...

编程日记 2024/4/2 18:13:34

代码随想录算法训练营 Day41 动态规划3

Day41 动态规划3 343. 整数拆分 思路 不知道如何拆分&#xff0c;才能使乘积最大化 有什么理论依据&#xff1f; 根据代码随想录 拆分使乘积最大化逻辑&#xff1a;应该尽可能拆成相同的数 根据题目&#xff0c;发现&#xff0c;拆分后的数可以继续拆分&#xff0c;因此可…...

编程日记 2024/4/2 18:12:33

面试题：反推B+树高度

一个表5000w数据&#xff0c;一个数据行大小为1k&#xff0c;主键为long类型数据&#xff0c;假设指针大小为8B&#xff0c;页大小为16K&#xff0c;求B树的高度&#xff1f; B树的非叶子节点存储key和指针&#xff0c;叶子节点存储数据&#xff0c;对应表中的某些行。 叶子节点…...

编程日记 2024/4/2 18:11:32

瑞吉外卖实战学习--11、分类管理的列表分页查询

分类管理的列表分页查询 前言1、创建接口2、基于分页组件来实现的 前言 通过前端接口可以看到请求和传递的参数&#xff0c;本文章是基于mybatisPlus的分页插件来实现的 1、创建接口 GetMapping("/page")public R<Page> page(int page,int pageSize){ // …...

编程日记 2024/4/2 18:09:30

网络安全新视角：数据可视化的力量

在当今数字化时代&#xff0c;网络安全已成为各大企业乃至国家安全的重要组成部分。随着网络攻击的日益复杂和隐蔽&#xff0c;传统的网络安全防护措施已难以满足需求&#xff0c;急需新型的解决方案以增强网络防护能力。数据可视化技术&#xff0c;作为一种将复杂数据转换为图…...

编程日记 2024/4/2 18:07:27

Aurora8b10b（2）上板验证

文章目录 前言一、AXI_Stream数据产生模块二、上板效果总结 前言 上一篇内容我们已经详细介绍了基于aurora8b10b IP核的设计&#xff0c;本文将基于此进一步完善并且进行上板验证。 设计思路及代码思路参考FPGA奇哥系列网课 一、AXI_Stream数据产生模块 AXIS协议是非常简单的…...

编程日记 2024/4/2 18:05:25

每天五分钟计算机视觉：使用神经网络完成人脸的特征点检测

本文重点 我们上一节课程中学习了如何利用神经网络对图片中的对象进行定位，也就是通过输出四个参数值bx、by、bℎ和bw给出图片中对象的边界框。 本节课程我们学习特征点的检测，神经网络可以通过输出图片中对象的特征点的(x,y)坐标来实现对目标特征的识别，我们看几个例子。…...

编程日记 2024/4/2 18:04:24

表白墙项目（JAVA实现）

1、在html里 class使用. id使用# 2、记得引入响应依赖&#xff08;举例lombok&#xff09; 3、messageController package com.example.demo.demos.web; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.RequestMapping; i…...

编程日记 2024/4/2 18:00:19

openGauss 高级分析函数支持

高级分析函数支持 可获得性 本特性自openGauss 1.1.0版本开始引入。 特性简介 无。 客户价值 我们提供窗口函数来进行数据高级分析处理。窗口函数将一个表中的数据进行预先分组&#xff0c;每一行属于一个特定的组&#xff0c;然后在这个组上进行一系列的关联分析计算。这…...

编程日记 2024/4/2 17:59:18

【Java面试题系列】基础篇

目录 基本常识标识符的命名规则八种基本数据类型的大小&#xff0c;以及他们的封装类3*0.10.3返回值是什么short s1 1; s1 s1 1;有什么错? short s1 1; s1 1;有什么错?简述&&与&的区别&#xff1f;简述break与continue、return的区别&#xff1f;Arrays类的…...

编程日记 2024/4/2 17:58:17

Ubuntu 23.04 安装es

在Ubuntu 23.04上安装Elasticsearch的过程可能与之前版本类似&#xff0c;以下是基于最新稳定版Elasticsearch的一般安装步骤&#xff1a; 准备工作&#xff1a; 确保系统已更新至最新版本&#xff1a; sudo apt update && sudo apt upgrade安装Java Development Kit (…...

编程日记 2024/4/2 17:56:14

gradle 7.0 + 配置

Maven 镜像地址的设置 原来在项目根目录的 build.gradle 中进行设置&#xff0c;但是现在里面只有plugins。 工程的build.gradle的dependencies修改为plugins&#xff0c;替代了引用原来的Gradle版本。 // Top-level build file where you can add configuration options com…...

编程日记 2024/4/2 17:55:13

vue3的ref和reactive对比

一&#xff0c;ref 作用: 定义一个 ref 响应式的数据语法: const xxx ref(initValue) 用法 创建一个包含响应式数据的引用对象&#xff08;reference对象&#xff0c;简称ref对象&#xff09;。 JS中操作数据&#xff1a; xxx.value 模板中读取数据: 不需要.value&#xff0…...

编程日记 2024/4/2 17:53:11

是否应该升级到ChatGPT 4.0？深度对比ChatGPT 3.5与4.0的差异

如果只是想简单地体验AI的魅力&#xff0c;感受大模型的独特之处&#xff0c;或是玩一玩文字游戏&#xff0c;那么升级至ChatGPT 4.0可能并非必需。然而&#xff0c;若你期望将AI作为提升工作学习效率的得力助手&#xff0c;那么我强烈建议你升级到ChatGPT 4.0。 如果你不知道…...

编程日记 2024/4/2 17:52:09

C++刷题篇——04找等值元素

一、题目 二、解题思路 1、分割后放进二维数组 2、使用map&#xff0c;key为数值&#xff0c;value为其坐标 3、遍历二维数组元素&#xff0c;再在map中找该元素对应的value值&#xff08;二维数组形式&#xff09;&#xff0c;倘若value.size为1&#xff0c;那直接返回-1&…...

编程日记 2024/4/2 17:51:07

2024年最新服装erp软件排名！（建议收藏）

随着数字经济时代的到来&#xff0c;传统服装生产企业正在经历深刻的变革。如何实现产业数字化升级&#xff0c;是众多服装企业面临的共同课题。当前&#xff0c;服装类的企业管理软件已经成为企业实现智能化转型的关键。面对已经发生深刻改变的商业竞争环境&#xff0c;传统的…...

编程日记 2024/4/2 17:49:05

Radash一款JavaScript最新的实用工具库，Lodash的平替！

文章目录 Lodash 的痛点进入正题--Radash特点 举例几个常用的api 一说lodash应该大部分前端同学都知道吧&#xff0c;陪伴我们好多年的JavaScript工具库&#xff0c;但是自从 ES6 出现后就慢慢退出前端人的视线&#xff0c;能ES6写的代码绝对不会用Lodash&#xff0c;也不是完全…...

编程日记 2024/4/2 17:43:59

使用node爬取视频网站里《龙珠》m3u8视频

1. 找到视频播放网站 百度一下 龙珠视频播放 精挑细选一个可以播放的网站。 如&#xff1a;我在网上随便找了一个播放网站&#xff0c;可以直接在线播放 https://www.xxx.com/play/39999-1-7.html 这里不具体写视频地址了&#xff0c;大家可以自行搜索 2.分析网页DOM结…...

编程日记 2024/4/2 17:41:57

搜索与图论——Prim算法求最小生成树

在最小生成树问题里&#xff0c;正边和负边都没问题 朴素版prim算法 时间复杂度O(n^2) 生成树&#xff1a;每一次选中的t点&#xff0c;它和集合的距离对应的那条边&#xff0c;就是生成树的一条边 算法流程和dijkstra算法非常相似 #include<iostream> #include<cs…...

编程日记 2024/4/2 17:40:56

sqlmap基础知识

一、sqlmap简介 sqlmap是一个开源的渗透测试工具&#xff0c;可以自动检测和利用SQL注入漏洞以及接管数据库服务器的过程。 官网&#xff1a; sqlmap.org 核心功能 漏洞检测漏洞利用 学习关键点 基于sqlmap进行sql注入漏洞的检测&#xff0c;注入利用和攻击基于sqlmap进…...

编程日记 2024/4/2 17:39:55

读《C Primer Plus》

1、汇编语言是为特殊的中央处理单元设计的一系列内部指令&#xff0c;使用助记符来表示&#xff1b;不同的CPU系列使用不同的汇编语言。 2、C语言充分利用计算机优势&#xff0c;使它具有汇编语言才有的微调控能力&#xff0c;可移植性极好。 3、C语言可以访问硬件、操作内存…...

编程日记 2024/4/2 17:37:52

深入理解计算机系统 家庭作业 2.66

/* 前置条件:无符号整数右移不产生1 调用函数是为了可以查看整个过程,不影响结果. 思路是让x在右移的过程中,把最高位之前的位全部填满. 填满后的结果右移一位(即x的最高位变为0,其他为1),再异或x得到最高位 以此类推知道覆盖到32位. */ #include <stdio.h> #inclu…...

编程日记 2024/4/2 17:33:48

【服务端】node.js详细的配置

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…...

编程日记 2024/4/2 17:32:47

二、CentOS基础配置（1.网络与包管理）

文章目录 二、基础配置操作1、网络管理&#xff08;配置静态地址并进行ssh远程连接&#xff09;&#xff08;1.&#xff09;静态地址配置&#xff08;2.&#xff09;IP配置注释&#xff08;3.&#xff09;配置SSH远程连接 2、包管理&#xff08;1.&#xff09;yum软件包管理器1…...

编程日记 2024/4/2 17:29:43

Golang基础-5

Go语言基础 介绍 基础 切片 切片声明 切片初始化 切片基础操作 多维切片 介绍 本文介绍Go语言中切片(slice)(切片声明、切片初始化、切片基础操作、多维切片)等相关知识。 基础 切片 切片&#xff08;slice&#xff09;是对数组的一个连续片段的引用&#xff0c;切…...

编程日记 2024/4/2 17:24:36

网站建设涉及的内容/友情链接的定义

android程序内存被分为2部分&#xff1a;native和dalvik&#xff0c;dalvik就是我们平常说的java堆&#xff0c;我们创建的对象是在这里面分配的&#xff0c;而bitmap是直接在native上分配的&#xff0c;对于内存的限制是 nativedalvik 不能超过最大限制。android程序内存一般限…...

编程日记 2024/11/7 10:18:01

微信网站域名备案成功后怎么做/中国宣布疫情结束日期

一. 出错原因 原因: 当后端传Long类型给前端, Long类型数据大于17位时, 前端拿到数据会损失精度.前端拿到的数据: 第16位会四舍五入, 17位后的数据自动用0代替)二. 解决方案 解决方案: 后端把Long类型改为String类型, 再传给前端三. 案例 1 传给前端是Long类型的单个数据 : …...

编程日记 2024/11/7 6:59:55

建设基础化学网站的经验/今日军事新闻头条

选自GoogleAIblog 作者&#xff1a;Django Stars本文转自机器之心&#xff08;nearhuman2014&#xff09;原文链接&#xff1a;https://djangostars.com/blog/python-ide/前言写 Python 代码最好的方式莫过于使用集成开发环境&#xff08;IDE&#xff09;了。它们不仅能使你的…...

编程日记 2024/11/7 6:37:41

网站建设288/广州seo关键词优化费用

atitit.设计模式(2) -----查表模式/ command 总结 1. 应用场景&#xff1a; 1 1. 取代一瓦if else 1 2. 建设api rpc风格的时候儿. 1 3. 菜单是Command模式的一个典型实例&#xff0c; 1 4. 上下文中执行客户代码 1 5. 使用命令模式作为"CallBack"在面向对象系统中的…...

编程日记 2024/11/7 5:25:05

wordpress2017电脑版/你对网络营销的理解

Razor视图引擎中&#xff0c;使用部分视图编译报错 类型“System.Object”在未被引用的程序集中定义。必须添加对程序集“System.Runtime, Version4.0.0.0, Cultureneutral, PublicKeyTokenb03f5f7f11d50a3a”的引用 查找网上一些解决方案&#xff0c;在微软官网找到同样问题 最…...

编程日记 2024/11/7 4:38:41

网站的风格有哪些/简述优化搜索引擎的方法

PHP有干扰线噪点的验证码类PHP#验证码 #类2012-06-06 08:35验证码类代码&#xff1a;/* 一个网在线教程 http://yige.org */class Captcha{private $width;private $height;private $codeNum;private $code;private $im;function __construct($width80, $height20, $codeNum4){…...

编程日记 2024/11/7 4:30:37