VUE---小木屋见

最新推荐文章于 2024-05-16 09:13:38 发布

Lion Of WU

最新推荐文章于 2024-05-16 09:13:38 发布

阅读量138

点赞数

分类专栏： vue.js 文章标签： vue

本文链接：https://blog.csdn.net/NDSoumig/article/details/106045056

版权

vue.js 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

列表过滤应用

利用输入框输入的值，过滤出列表中的元素

v-model拿到input中的值
**filter( function(){} )**过滤函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./vue.js"></script>
<body>
    <div class="box">
        <div>
            <input type="text" v-model='mymodel' @input='handelfunc()'>
            <li v-for="data in datalist">{{data}}</li>
        </div>
    </div>
</body>
<script>
    let vue = new Vue({
        el:'.box',
        data:{
            mymodel:'',
            datalist:['aaa','bbb','ccc']
        },
        methods:{
            handelfunc(){
                // console.log(this.mymodel)
                let re_datalist = this.datalist.filter(item=>item.indexOf(this.mymodel)>-1)
                //filter过滤元素内容，里面传回调函数，通过返回的ture和false来决定是否过滤
                //indexOf通过传入值来查找item里是否有匹配字符,有返回位置，不然返回-1
                console.log(re_datalist)
                this.datalist = re_datalist;
                //直接替换
            }
        }
    })
</script>
</html>