JZTXT

vue之过滤、筛选功能的实现

发布时间 2023-04-06 20:42:10作者: 树苗叶子

目录

需求

给定一个列表(模拟数据)，根据用户输入，自动筛选输入的内容并输出到屏幕

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/jQuery.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" @input="inputFunc" v-model="myText">
    <ul>
        <li v-for="i in newItemList">{{i}}</li>
    </ul>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            myText: '',
            itemList: ['a', 'ab', 'abc', 'b', 'bc', 'bdc', 'dbd'],
            newItemList: ['a', 'ab', 'abc', 'b', 'bc', 'bdc', 'dbd']
        },
        methods: {
            inputFunc() {
	        // 当接收到true，则会将输入的内容返回，并写入到newItemList中，最终输出到屏幕
                this.newItemList = this.itemList.filter(
		    // 当输入的内容存在，则返回true
                    item => item.indexOf(this.myText) >= 0
                )
            }
        }
    })
</script>
</html>