首页 > 其他分享 >计算属性模糊查询

计算属性模糊查询

时间:2024-10-09 10:17:39浏览次数:11  
标签:el arr return name age 模糊 查询 selName 属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
<input type="text" v-model="selName">
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr v-for="(a,idx) in selArr":key="idx">
        <td>{{a.name}}</td>
        <td>{{a.age}}</td>
    </tr>
</table>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                arr:[
                    {name:"张三",age:20},
                    {name:"张三风",age:21},
                    {name:"王重阳",age:22},
                ],
                selName:""
            },
            computed:{
                selArr(){
                    var that=this;
                    return this.arr.filter(function(v){
                        return v.name.indexOf(that.selName)!=-1;
                    })
                }
            }
        })
    </script>
</body>
</html>

标签:el,arr,return,name,age,模糊,查询,selName,属性
From: https://blog.csdn.net/2401_83905000/article/details/142780136

相关文章

  • java复制查询数组-cnblog
    java数组复制数组copyOf(待复制数组,复制后新数组的长度)如果复制后数组的长度,长于原来数组,多出来的元素会被补0,如果新数组元素少会从第一个元素,取到指定元素长度packagenb;importjava.util.Arrays;publicclasscopyOf_{publicstaticvoidmain(String[]......
  • 窗体MainWindow的属性设置2
    文章目录1.控件名称2.菜单栏A.一级菜单B.子菜单①子菜单添加快捷键②子菜单添加图标3.工具栏A.将子菜单移除工具栏B.移除工具栏4.状态栏A.移除状态栏B.状态栏显示信息状态栏一直显示信息  本章将主要介绍窗体MainWindow控件的属性设置,例如控件名称、菜单栏、......
  • CMake 属性之目标属性
    【写在前面】CMake可以通过属性来存储信息。它就像是一个变量,但它被附加到一些其他的实体上,像是一个目录或者是一个目标。例如一个全局的属性可以是一个有用的非缓存的全局变量。在CMake的众多属性中,目标属性( TargetProperties )扮演着尤为重要的角色,它们直接关联到最......
  • MySQL慢查询优化&缩容实践
    索引调整在一个数据量较大的订单表中,发现某些查询因为缺少合适的索引而变慢。添加了必要的索引后,查询效率明显提升。查询条件调整在一个sql中需要根据时间条件查询,但是等号左边的字段使用了函数操作(将时间戳转换成了年月日),导致索引失效进行了全表扫描。解决:将等号右边的条件反......
  • 国际金价行情具体实现查询
    整体请求流程介绍:本次解析通过云市场的云服务来实现查询实时国际黄金的实时行情,首先需要准备选择一家可以提供查询的商品。步骤1:选择商品如图点击免费试用,即可免费申请该接口数据步骤2:调试输入对应的参数,找对对应的子接口,这里是伦敦金银点击《发起请求》,即可看......
  • Vue3 计算属性
    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、computed是什么?二、示例前言计算属性用于根据其他数据的变化动态计算衍生出来的属性值,而且具有缓存机制,只有相关依赖发生变化时才会重新计算。一、computed是什么?计算属性关键词:......
  • CSS3属性选择器
    属性选择器选择符                       简介E[att]                   选择具有att属性的元素E[att="val"]          选择具有att属性且属性值等于val的E元素E......
  • 查询优化器选错索引:问题分析与解决方案详解
    引言在现代数据库系统中,查询优化器是负责决定如何执行SQL查询的核心组件。它会根据查询语句、数据分布、索引情况等,选择最优的执行计划。然而,查询优化器并不总是能够做出最佳选择,某些情况下可能会选择一个不理想的索引,从而导致查询性能下降。当查询优化器选错索引时,如何......
  • jsp城市公交查询系统455p7--(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表用户,站点查询,线路查询,站站查询开题报告内容一、课题背景及意义在快速发展的城市中,公共交通作为市民日常出行的重要方式,其便捷性和效率直接影响到市民的生活......
  • GUI图形界面 无代码开发 原理 - 属性标识链 | uiotos致敬amis、nodered、appsmith、co
    低代码饱受争议。也有例外:后端NodeRed,前端Amis。整体还是诟病为主:简单业务可以,复杂的是扯淡,不论前后端。这是一贯的认知。在GUI方面,UIOTOS发明的嵌套技术,为复杂前端的无代码开发,开辟了一条新的思路。往期文章:可视化拖拉拽?过时了!组态零代码,不能做复杂前端?嵌套原理一复杂交互......