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>
相关推荐
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript