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

一、案例实现页面

二、案例实现效果

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 ()方法创建给定数组的一部分的浅副本,过滤掉给定数组中通过所提供函数实现的测试的元素

过滤数据获取数组对象

        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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

星闪BLE与蓝牙

蓝牙与低功耗蓝牙 蓝牙工作在2.4GHz的频段&#xff0c;在工作频段2402MHz-2480MHz上分为79个信道&#xff0c;低功耗蓝牙分为40个信道。一组设备通信的时候&#xff0c;短暂占用一个信道发包&#xff0c;由于其跳频技术&#xff0c;每次传输完数据包之后都会切换到另一个信道继…

web布局——说清楚fixed布局

极限省流 想要fixed做导航页面&#xff1a;指定清楚top、left、right、bottom&#xff0c;没指定清楚布局位置就会采用默认的方式&#xff1a; 0&#xff09;父元素的padding&#xff1a;fixed元素相对位移 1&#xff09;同级元素是fixed元素&#xff1a;覆盖 2&#xff09…

尾矿库在线安全监测:提升矿山安全水平

在矿山安全领域&#xff0c;尾矿库的安全管理尤为关键。尾矿库作为矿山生产链条的重要环节&#xff0c;其稳定性不仅关系到生产活动的持续进行&#xff0c;更直接影响着周边环境和人民群众的生命财产安全。因此&#xff0c;尾矿库的安全监测显得尤为重要。近年来&#xff0c;随…

【Leetcode每日一题】 动态规划 - 不同路径(难度⭐⭐)(46)

1. 题目解析 题目链接&#xff1a;62. 不同路径 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 想要解决这个问题&#xff0c;我们得像个侦探一样&#xff0c;一步步地追踪路径&#xff0c;找出所有可能的走法。接下…

2024年妈妈杯数学建模思路A题B题C题D题思路分享

文章目录 1 赛题思路2 比赛日期和时间3 组织机构4 建模常见问题类型4.1 分类问题4.2 优化问题4.3 预测问题4.4 评价问题 5 建模资料 1 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 2 比赛日期和时间 报名截止时间&#xff1a;2024…

JavaEE:网络原理——协议(网络层+数据链路层)

网络层&#xff1a;IP协议 IP协议报头 其中取值只有两种&#xff0c;分别是4和6&#xff0c;分别对应IPv4和IPv6 IP报头&#xff0c;单位是4个字节&#xff0c;可变长 type of service&#xff0c;表示当前IP协议所处的工作模式 实际上只有四位是有效的。而且这4为是彼此冲突…

GEE实践应用|热岛效应(一)地表温度计算

目录 1.学习目标 2.理论介绍 3.从MODIS获得地表温度 4.从Landsat卫星获得地表温度 1.学习目标 ①了解如何使用GEE计算地表温度 2.理论介绍 城市化涉及用建筑物、道路和停车场等建筑结构取代自然景观。这种土地覆盖的改变也改变了土地表面的特性。这些变化的范围从表面反射和…

SpringBoot Redis的使用

官方文档&#xff1a; 官方文档&#xff1a;Spring Data Redis :: Spring Data Redis 和jedis一样&#xff0c;SpringBoot Redis 也可以让我在Java代码中使用redis&#xff0c;同样也是通过引入maven依赖的形式。 加速访问github: 使用steam可以免费加速访问github Spring…

【微服务】Sentinel(流量控制)

文章目录 1.基本介绍1.Sentinel是什么2.Sentinel主要特性3.Sentinel核心功能1.流量控制2.熔断降级3.消息削峰填谷 4.Sentinel两个组成部分 2.Sentinel控制台显示1.需求分析2.下载3.运行1.进入cmd2.输入java -jar sentinel-dashboard-1.8.0.jar3.查看默认端口8080 4.访问1.账号和…

【八股】泛型

泛型存在的意义&#xff1f; 为了使相同的代码适用于多种数据类型&#xff0c;也就是代码复用。 参数类型上下限限制 <?> 无限制 <? extends E> 声明了类型的上界&#xff0c;表示参数类型可以是他或他的子类。 <? super E> 声明了类型的下界&#xf…

C++多线程:创建多个线程与数据共享安全问题(四)

1、创建多个线程 多线程的调度由操作系统负责&#xff0c;线程执行的先后没有严格的顺序完全看操作系统和CPU的心情。 #include <iostream> #include <vector> #include <thread>void thread_print(int num) {std::cout << "线程编号 " &…

视频无水印爬虫采集工具|抖音视频批量下载软件|可导出视频分享链接

全新视频无水印爬虫采集工具&#xff0c;助力您快速获取所需视频&#xff01; 视频无水印爬虫采集工具&#xff0c;为用户提供了强大的视频采集和下载功能。它可以批量提取关键词相关的视频&#xff0c;同时支持单独视频的提取和下载&#xff0c;操作简便&#xff0c;使用方便。…

数字兆欧表操作规程你知道多少?南电电力来告诉你!

一、数字兆欧表操作规程   数字兆欧表是一种现代化电子仪表&#xff0c;用于测量电气设备的绝缘电阻。其操作规程的目的是确保测量结果的准确性&#xff0c;并保证操作人员的安全。以下是主要的操作规程&#xff1a;   1.安全操作&#xff0c;断电与放电&#xff1a;在测量…

【MySQL探索之旅】MySQL数据表的增删查改——约束

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 《MySQL探索之旅》 |《Web世界探险家》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更…

ctf-36C3解析

一、环境 unbentu 这道题给了docker环境&#xff0c;gethub上面自己找 一个好用的linux全局切换梯子proxychains 二、开始解析 2.1初始 2.2编译 docker build . 2.3代理设置完毕 我试了一下代理还是不行&#xff0c;我们换源尝试一下 RUN sed -i s/deb.debian.org/mirro…

Go打造REST Server【二】:用路由的三方库来实现

前言 在之前的文章中&#xff0c;我们用Go的标准库来实现了服务器&#xff0c;JSON渲染重构为辅助函数&#xff0c;使特定的路由处理程序相当简洁。 我们剩下的问题是路径路由逻辑&#xff0c;这是所有编写无依赖HTTP服务器的人都会遇到的问题&#xff0c;除非服务器只处理一到…

Redis桌面客户端

3.4.Redis桌面客户端 安装完成Redis&#xff0c;我们就可以操作Redis&#xff0c;实现数据的CRUD了。这需要用到Redis客户端&#xff0c;包括&#xff1a; 命令行客户端图形化桌面客户端编程客户端 3.4.1.Redis命令行客户端 Redis安装完成后就自带了命令行客户端&#xff1…

面向对象特征一:封装性

9.1 为什么需要封装&#xff1f; 我要用洗衣机&#xff0c;只需要按一下开关和洗涤模式就可以了。有必要了解洗衣机内部的结构吗&#xff1f;有必要 碰电动机吗&#xff1f; 我要开车&#xff0c;我不需要懂离合、油门、制动等原理和维修也可以驾驶。 客观世界里每一个事物…

乐维更改IP地址

1.1 系统IP调整 vim /etc/sysconfig/network-scripts/ifcfg-ens1921.2 Web相关服务IP变更 1.2.1 编辑/itops/nginx/html/lwjkapp/.env文件,更改ZABBIXSERVER、ZABBIXRPCURL、DB_HOST中的IP 1.2.2 进入/itops/nginx/html/lwjk_app/目录下,执行php bin/manager process-conso…