首页 > 其他分享 >15-Vue核心-列表过滤和列表排序

15-Vue核心-列表过滤和列表排序

时间:2023-09-20 18:26:00浏览次数:42  
标签:Vue 15 name keyWord age sex nbsp 列表

列表过滤

 

监视属性,实现列表过滤

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本列表</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--  准备好一个容器  -->
        <div id="root">
            <!--  遍历数组  -->
            <h2>人员列表</h2>
            <input type="text" placeholder="请输入要查询的名字" v-model="keyWord">
            <ul>
                <li v-for="(p,index) in persons2" :key="index">
                    姓名:{{p.name}} &nbsp&nbsp 年龄:{{p.age}} &nbsp&nbsp 性别:{{p.sex}}
                </li>
            </ul>

        </div>

        <script type="text/javascript">
            // 阻止 vue 在启动时生成生产提示
            Vue.config.productionTip = false

            new Vue({
                el:"#root",
                data(){
                    return{
                        // 收集用户的输入
                        keyWord:"",
                        persons:[
                            {id:"001",name:"马冬梅",age:20,sex:"女"},
                            {id:"002",name:"周冬雨",age:21,sex:"女"},
                            {id:"003",name:"周杰伦",age:22,sex:"男"},
                            {id:"004",name:"温兆伦",age:23,sex:"男"}
                        ],
                        persons2:[]
                    }
                },
                watch:{
                    // 监视 keyWord 属性
                    keyWord:{
                        //immediate为true时,初始化时调用一下handler()函数
                        immediate:true,

                        handler(newValue,oldValue){
                            // 数组.filter() 实现数组的过滤,创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
                            this.persons2 = this.persons.filter((p)=>{
                                // 当 keyWord 是 p.name 中的内容,返回true,否则返回false
                                return p.name.indexOf(newValue) !== -1
                            })
                        }
                    }
                }
            })
        </script>
    </body>
</html>

 

标签:Vue,15,name,keyWord,age,sex,nbsp,列表
From: https://www.cnblogs.com/REN-Murphy/p/17718008.html

相关文章

  • vuejs+antv-g6绘制图表
    该内容包括antv-g6官网地址、antv-g6的基本使用(包括自定义节点、常用插件(右键菜单等)、基本事件、目前我所遇到的一些需求)。1、antv-g6的官网地址:https://g6.antv.antgroup.com/examples2、安装antv-g6组件npminstall@antv/g6 3、创建antvView.vue文件使用antv/g6......
  • 卡片列表布局
    实现代码1<template>2<div>3<!--平铺图片-->4<uiclass="course-list">5<!--设置图片宽度比例-->6<!--循环绑定数据-->7<liclass="course-item"......
  • IIS报错:HTTP 错误 404.2 - Not Found 由于Web服务器上的”ISAPI和CGI限制”列表设置,无
     解决方法:  ......
  • Ant Design Vue 中的tab组件中,获取不到$ref
    问题:在tab的组件中引入了一个组件,在页面渲染时,需要用到子组件bpmnModeler里面的方法,调用this.$ref.bpm的时候报错了,找不到bpm<a-tab-panekey="3"tab="流程图"><divclass="search"><a-card><a-rowstyle="positi......
  • (建议收藏)OpenHarmony系统能力SystemCapability列表
    SysCap,全称SystemCapability,即系统能力,指操作系统中每一个相对独立的特性。开发者使用某个接口进行开发前,建议先阅读Syscap使用指南,了解Syscap的定义和使用指导。再结合下文中的表格判断具体能力集是否支持某个设备,提高开发效率。说明:Default代表了一个功能比较全面的OpenHarmony设......
  • JS 将列表转成树形结构数据
    一、背景联调发现有些后端返回List但是前后需要转树形结构二、实现点击查看代码import_,{isArray}from'lodash'/***将列表转成树形结构数据*@paramnodes列表数据*@paramoptions可选参数,{idKey,pIdKey,childrenKey}*@returns{[]}树形结构数据......
  • vue-day05
    补充1.图片在接口中返回一些数据和图片地址,而不是图片的二进制内容{code:100,msg:'成功',img:地址}2.md5不是加密,摘要算法动态组件<component:is="who"></component>component标签的is属性等于组件名字,这里就会显示这个组件HTML<!DOCTYPEhtml><html......
  • Vue-cli创建项目
    1.单页面应用:spa-以后Vue的项目就只有一个:XX.html页面-当定义了很多组件,不可能都写在:XX.html中吧2.单文件组件:xx.vue-https://v2.cn.vuejs.org/v2/guide/single-file-components.html-一个组件一个文件一个组件中有的东西-1.html内容:以后html都放在te......
  • Vue的DatePicker日期选择器
    picker-option属性官网描述是这样的 1.disabledDate一般我们使用picker-option都是通过disabledDate参数,来设置其日期选择区间,代码如下:<el-col:span="12"><el-form-itemlabel="开票日期起"prop="rqq"><el-date-pickert......
  • 15-1 ACL实验
    实验一(基本ACL的应用)学会配置基础的ACL拓扑在AR1对应位置配置ACL,使PC1禁止访问PC2配置PC1配置,PC2参考PC1AR1配置<Huawei>sys[Huawei]sysAR1[AR1]integi0/0/0[AR1-GigabitEthernet0/0/0]ipaddr192.168.1.254255.255.255.0[AR1-GigabitEthernet0/0/0]integi......