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>
  1. 将事件全部定义在计算属性中

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.创建app
      const app = Vue.createApp({
        // data: option api
        data: 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.挂载app
      app.mount("#app");
    </script>

    <style></style>
  </body>
</html>
相关推荐
小磊哥er2 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
旷世奇才李先生7 分钟前
Next.js 安装使用教程
开发语言·javascript·ecmascript
ᥬ 小月亮13 分钟前
webpack基础
前端·webpack
凛铄linshuo28 分钟前
爬虫简单实操2——以贴吧为例爬取“某吧”前10页的网页代码
爬虫·python·学习
YongGit32 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
大春儿的试验田1 小时前
高并发收藏功能设计:Redis异步同步与定时补偿机制详解
java·数据库·redis·学习·缓存
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学