Vue_14:列表过滤

最新推荐文章于 2024-08-04 23:51:36 发布

易辰不呆

最新推荐文章于 2024-08-04 23:51:36 发布

阅读量98

点赞数

分类专栏：笔记文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/wcj28738/article/details/120923893

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<body>
    <div>
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <url>
            <li v-for="(p,index) in person" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </url>
    </div>
    
</body>
<!--用watch实现列表过滤-->
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            keyWord:'',
            person:[
                {id:'001',name:'马冬梅'，age：19，sex：'女'},
                {id:'002',name:'周冬雨'，age：20，sex：'女'},
                {id:'003',name:'周杰伦'，age：21，sex：'男'},
                {id:'004',name:'温兆伦'，age：22，sex：'男'}
            ]，
            filperson:[]
        },
        watch:{
            keyWord:{
                immediate:true,
                handler(val){
                    this.filPersons = this.persons.filter((p)=>{
                      return p.name.indexOf(val) !== -1  
                    })
                }
            }
        }
    
    })
</script>

<body>
    <div>
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <url>
            <li v-for="(p,index) in person" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </url>
    </div>
    
</body>
<!--用computed实现列表过滤-->
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            keyWord:'',
            person:[
                {id:'001',name:'马冬梅'，age：19，sex：'女'},
                {id:'002',name:'周冬雨'，age：20，sex：'女'},
                {id:'003',name:'周杰伦'，age：21，sex：'男'},
                {id:'004',name:'温兆伦'，age：22，sex：'男'}
            ]，
          
        },
       computed:{
           filperson(){
               return this.persons.filter((p)=>{
                      return p.name.indexOf(this.keyWord) !== -1  
                    })
                }
            }
        }
    
    })
</script>

易辰不呆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue_14:列表过滤

<body> <div> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <url> <li v-for="(p,index) in person" :key="index"> {{p.name}}-{{p.age}}.
复制链接

扫一扫