vue 过滤器

最新推荐文章于 2024-01-21 16:42:07 发布

YingMuMonkey

最新推荐文章于 2024-01-21 16:42:07 发布

阅读量81

点赞数

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

本文链接：https://blog.csdn.net/YingDaoMonkey/article/details/123599904

版权

随记专栏收录该内容

100 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <input type="text" placeholder="请输入要查询的字" v-model="keyword"> <button @click="search()">查询</button>
        <ul>
            <li v-for="(item,i) in filName" >{{item}}</li>
        </ul>
    </div>
    
    <script>
        new Vue({
            el:'#root',
            data:{
                name:['张三','李四','王五','赵六'],
                filName:[],
                keyword:''
            },
            watch:{
                keyword:{
                    immediate:true,
                    handler(val){
                        console.log(val)
                        this.filName = this.name.filter((p)=>{
                            return p.indexOf(val) !== -1
                        })
                    }
                }
            }
        })
    </script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

YingMuMonkey

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 过滤器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫