Vue案例——查询用户

落凡尘༣

已于 2024-05-12 17:58:44 修改

阅读量404

点赞数 5

文章标签： vue.js javascript 前端

于 2024-04-12 17:13:54 首次发布

本文链接：https://blog.csdn.net/m0_65290003/article/details/137685903

版权

Vue案例——查询用户

Vue案例——查询用户

Vue案例——查询用户

一、效果

在这里插入图片描述

使用 Vue.js 框架来构建一个用于查询和排序用户列表的Web应用：

显示一个用户列表，通过表格的形式呈现，便于用户查看；
提供一个输入框，允许用户输入关键字来搜索用户；
当用户在输入框中输入关键字时，用户列表应实时更新，只显示名称包含关键字的用户

二、整体分析

1、逻辑说明

搜索功能
当用户在搜索框中输入关键字时，keyword的值会更新，进而触发fillUsers计算属性的重新计算。这会导致视图中的用户列表更新为只包含名称包含关键字的用户。
排序功能
通过改变sortType的值，可以切换排序方式。当sortType为1时，用户列表按年龄升序排列；当sortType为2时，用户列表按年龄降序排列。当sortType为0时，用户列表保持原顺序。

2、代码分析

  <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" class="basic" @click="changeStyle()">
      <h1>查询用戶:</h1>
      <hr />
      <input type="text" name="" placeholder="请输入名字" v-model="keyword" />
      <button @click="sortType=1">年龄升序</button>
      <button @click="sortType=2">年龄降序</button>
      <button @click="sortType=0">原顺序</button>
      <hr />
      <table width="300px" border="1">
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </tr>
        <tr v-for="(user,index) in fillUsers" :key="user.id">
          <th>{{user.id}}</th>
          <th>{{user.name}}</th>
          <th>{{user.sex}}</th>
          <th>{{user.age}}</th>
        </tr>
      </table>
    </div>

<div id="app">...</div>：这是Vue应用的主要容器，所有的Vue组件和模板都将在这里被渲染。
两个<input type="text">元素：用于输入两个数字，通过v-model.number与Vue实例中的num1和num2数据属性双向绑定。.number修饰符确保输入的值被解析为数字。
<select>元素：用于选择操作符（加、减、乘、除），与Vue实例中的sign数据属性双向绑定。
结果输出: {{num1}}{{sign}}{{num2}}={{result}}
这是一个简单的模板，用于显示用户输入的两个数字、所选的操作符以及计算结果。

<script type="text/javascript" src="../js/vue.global.js"></script>
    <script>
      // 1.创建app
      const app = Vue.createApp({
        // data: option api
        data: function () {
          return {
            sortType: 0, //0表示原顺序,1表示升序,2表示降序
            keyword: "",
            users: [
              {
                id: 1,
                name: "张三",
                sex: "男",
                age: 21,
              },
              {
                id: 2,
                name: "李四",
                sex: "男",
                age: 22,
              },
              {
                id: 3,
                name: "王五",
                sex: "男",
                age: 19,
              },
              {
                id: 4,
                name: "李思思",
                sex: "女",
                age: 18,
              },
            ],
          };
        },
        computed: {
          fillUsers() {
            let arr = this.users.filter((user) => {
              return user.name.indexOf(this.keyword) > -1;
            });
            if (this.sortType == 1) {
              //升序
              arr.sort(function (u1, u2) {
                return u1.age - u2.age;
              });
            }
            if (this.sortType == 2) {
              //降序
              arr.sort(function (u1, u2) {
                return u2.age - u1.age;
              });
            }
            return arr;
          },
        },
      });
      // 2.挂载app
      app.mount("#app");
    </script>

data函数：定义了Vue实例的初始状态。这里有三个属性：num1、num2和sign，它们分别用于存储用户输入的第一个数字、第二个数字和所选的操作符。
- sortType: 一个整数，用于指示排序类型。0表示不排序（原顺序），1表示升序，2表示降序。
- keyword: 一个字符串，用于搜索用户姓名。
- users: 一个数组，包含多个用户对象，每个对象都有id、name、sex和age属性。
computed对象：定义了计算属性result。这个属性基于num1、num2和sign的值动态计算。当用户改变输入或选择新的操作符时，result会自动更新。
- fillUsers: 一个计算属性，它基于users、sortType和keyword的值动态计算。
- 使用filter方法从users数组中筛选出名称包含keyword的用户。
- 如果sortType为1，则按年龄升序排序筛选后的数组。
- 如果sortType为2，则按年龄降序排序筛选后的数组。
- 返回排序和筛选后的数组。
在result的计算函数中，根据sign的值执行相应的数学运算，并返回结果。 Vue.createApp({...})：创建一个新的Vue应用实例。
app.mount("#app")：将Vue应用挂载到id为"app"的DOM元素上。

3、Vue.js与DOM的交互

v-model="keyword"：在输入框中使用 v-model 指令，使得输入框的值与Vue实例的 keyword 数据属性保持同步。
@click="sortType=1"、@click="sortType=2"、@click="sortType=0"：在按钮上使用
@click 事件监听器，当按钮被点击时，会改变Vue实例的 sortType 数据属性的值。
v-for="(user,index) in fillUsers"：在表格行中使用 v-for 指令来遍历 fillUsers计算属性返回的用户数组，并为每个用户创建一个表格行。
:key="user.id"：为 v-for 循环中的每个元素提供一个唯一的键，有助于Vue更高效地更新DOM。

落凡尘༣

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
Vue案例——查询用户

> 使用 Vue.js 框架来构建一个用于查询和排序用户列表的Web应用：> 1. 显示一个用户列表，通过表格的形式呈现，便于用户查看；> 2. 提供一个输入框，允许用户输入关键字来搜索用户；> 3. 当用户在输入框中输入关键字时，用户列表应实时更新，只显示名称包含关键字的用户
复制链接

扫一扫