zoukankan      html  css  js  c++  java
  • vue八:vue基础之模糊查询案例

    实现模糊查询,查询出包含输入内容的元素

    两种监听方式:

    1.实时监听input输入框,只要发生改变,就触发查询

    2.输入框失去焦点(光标离开输入框)时触发

    这里采用input事件,实时查询

    为了能实时拿到输入框的数据,使用v-mdel进行双向绑定

    使用filter筛选数据

    由于filter并不会对原数组产生影响,所以需要用新数组替换旧数组

    解决方法

    1.使用计算属性(推荐方法)

    2.使用两份原数据,只对一份数据过滤(笨方法)

    <!DOCTYPE html>
    <html lang='en'>
    <head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <script src='./vue.js'></script>
    <title></title>
    </head>
    <body>
    <div id='app'>
    <input type="text" @input="handleInput()" v-model="inputText">
    <ul>
    <li v-for="data in dataList">
    {{ data }}
    </li>
    </ul>
    </div>
    <script>
    var vm = new Vue({
    el: '#app',
    data: {
    inputText: '',
    dataList: ['aaa', 'bbb', 'ccc', 'ddd', 'abc', 'bcd', 'acd'],
    List: ['aaa', 'bbb', 'ccc', 'ddd', 'abc', 'bcd', 'acd']
    },
    methods: {
    handleInput() {
    console.log(this.inputText)
    // 使用filter根据inputText筛选数据
    var newList = this.List.filter(item => item.indexOf(this.inputText) > -1)
    console.log(newList)
    this.dataList = newList // 如果这样直接替换旧数组,会造成每次替换后的数组都是筛选过后的数组
    }
    }
    })
    </script>
    </body>
    </html>
    讨论群:249728408
  • 相关阅读:
    python 数据结构与算法之排序(冒泡,选择,插入)
    python 面向对象基础和高级复习
    python numpy模块
    高精度算法
    数论
    位运算和时间复杂度的分析
    C++ OI图论 学习笔记(初步完结)
    C++语言入门知识点(详细版)【持续更新每周三更】,小舒舒戳这里!!!
    C++基础语言知识大汇总(不断更新!!!)
    二分
  • 原文地址:https://www.cnblogs.com/zhongyehai/p/12337821.html
Copyright © 2011-2022 走看看