您现在的位置是:首页 > 正文

Vue中用计算属性来实现过滤(比watch来实现好一点)

2024-01-30 21:12:18阅读 0

<html>

<head>

    <meta charset="UTF-8" />

    <title>初始条件渲染</title>

    <!-- 引入Vue -->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

    <div id="root">

        <!-- 1.遍历数组 -->

        <h2>人员列表</h2>

        <input type="text" placeholder="请输入名字" v-model="keyWord">

        <u1>

            <li v-for="(p,index) in filePersons" :key="index">

                {{p.id}}--{{p.name}}--{{p.age}}--{{index}}

            </li>

        </u1>

    </div>

</body>


 

<script type="text/javascript">

    // Vue.config.productionTip = false

    // Vue.config.productionTip= false  //阻止Vue 在启动时生成生产提示

    // 创建Vue实例

    new Vue({

        el: '#root',  //el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串


 

        // 遍历数组

        data: {

            keyWord: '',

            persons: [

                { id: '001', name: '马冬梅', age: 19, sex: '女' },

                { id: '002', name: '周冬雨', age: 20, sex: '女' },

                { id: '003', name: '周杰伦', age: 21, sex: '女' },

                { id: '004', name: '温兆伦', age: 22, sex: '女' }

            ],

            // filePersons: []

        },

        // 用计算属性来实现过滤比较简单(比较推荐的过滤方式)


 

        computed:{

            filePersons(){

                return this.persons.filter((p)=>{

                    return p.name.indexOf(this.keyWord) !== -1

                })

            }

        }

        // watch: {

        //     keyWord: {

        //         immediate:true,

        //         handler(val) {

        //             console.log('keyWord被修改了', val)

        //             this.filePersons = this.persons.filter((p) => {

        //                 return p.name.indexOf(val) !== -1

        //             })

        //         }

        //     }

        // }


 

    })

</script>

</html>

网站文章

  • [大、小根堆应用总结一]堆排序的应用场景

    前言 在整理算法题的时候发现,大根堆(小根堆)这种数据结构在各类算法中应用比较广泛,典型的堆排序,以及利用大小根堆这种数据结构来找出一个解决问题的算法最优解。因此,我打算单独将关于堆的应用独立总结出来,后面每遇到一种跟堆结构相关的应用都放到这个目录下。堆的定义 n个关键字序列L[1…n]称为堆,当且仅当该序列满足: 1. L(i)<=L(2i)且L(i)<=L(2i+1)或

    2024-01-30 21:12:10
  • Luogu-P1941 飞扬的小鸟

    Luogu-P1941 飞扬的小鸟

    题目题目链接测试得分:  100主要算法:  DP(零一背包,完全背包)题干:   背包组合问题应试策略:每一个点都是由前面的状态转移的,并且对后面的状态没有影响,满足最优化原理与无后效性原则,选择算法DP对于图上的每一个点都是由前一列降下来或者是前面升上来的,对于降下来的情况是...

    2024-01-30 21:12:02
  • Windows内核和Linux内核比较

    Windows内核和Linux内核比较

    Windows内核和Linux内核比较

    2024-01-30 21:11:25
  • 关于C语言自定义函数浅谈

    关于C语言自定义函数浅谈

    如果函数不接收用户传递的数据,那么定义时可以不带参数。如下所示:123//bodydataType 是返回值类型,它可以是C语言中的任意数据类型,例如 int、float、char 等。functio...

    2024-01-30 21:11:18
  • [MySQL]聚合函数与分组

    [MySQL]聚合函数与分组

    1. 聚合函数介绍 1.1 什么是聚合函数 1.2 常用的聚合函数 2. 常用的聚合函数 2.1 AVG() 2.2 SUM() 2.3 MAX() 2.4 MIN() 2.5 COUNT() 2.6 补充 3. GROUP BY 3.1 分组的基本使用 3.2 使用多个列分组 3.3 结论 3.4 WITH ROLLUP 4. HAVING

    2024-01-30 21:10:43
  • 二分图相关

    二分图相关一、染色法判定二分图二分图要求边的两端点处于不同的集合,那么将两端点分别染成不同的颜色,如果没有冲突,则说明是二分图。首先是dfs函数,深搜进行染色:bool dfs(int u,int c...

    2024-01-30 21:10:36
  • 在ML中缺乏数据可是个大问题,亲测有效的5种方法帮您解决

    在ML中缺乏数据可是个大问题,亲测有效的5种方法帮您解决

    https://www.toutiao.com/a6701193162699833859/ 在我做过的很多项目中,公司虽然有非常棒的AI商业创意,但当他们意识到自己没有足够的数据时,却会慢慢的变得沮丧起来。然而,确实有解决的方案。本文的目的是简要地向你介绍其中的一些在我的实践中已经证明有效的方法,而不是列出所有现有的解决方案。 数据稀缺问题非常重要,因为数据是任何人工智能项目的...

    2024-01-30 21:10:30
  • JavaWeb学习笔记——jQuery动画、事件

    jQuery-3动画方法练习:品牌显示事件文档加载事件绑定事件移除事件冒泡事件对象练习:图片跟随 动画 方法 基本: show([speed,[easing],[fn]]) 显示 hide([spee...

    2024-01-30 21:10:01
  • 结构体变量

    在C语言中,可以使用结构体(Struct)来存放一组不同类型的数据。结构体的定义形式为: struct 结构体名{ 结构体所包含的变量或数组 }; 结构体是一种集合,它里面包含了多个变量或数组,它们的...

    2024-01-30 21:09:56
  • Java面试注意

    3125

    2024-01-30 21:09:48