每天记录一个小知识---vue列表过滤学习

最新推荐文章于 2024-02-20 00:00:00 发布

码海探路

最新推荐文章于 2024-02-20 00:00:00 发布

阅读量111

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/gjjmQq/article/details/128944848

版权

这篇文章介绍了在Vue.js应用中如何通过watch监听器和computed属性来实现实时的列表过滤功能。用户输入关键词后，列表会动态显示包含关键词的食物项，示例包括了数据绑定、filter方法的使用以及Vue的响应式机制。

摘要由CSDN通过智能技术生成

今天学习了一个小知识，列表过滤。

过滤方法有，以下几种：

主体：

//1.引入
<script type="text/javascript" src="../js/vue.js"></script>
//2.页面
<div id="root">
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filFoodList" :key="index" >
                {{p.id}}-{{p.name}}-{{p.type}}
            </li>
        </ul>
 </div>

方法一：用watch实现

<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
            el: '#root',
            data: {
                keyWord: '',
                filFoodList:[],
                foodList: [
                    { id: '001', name: '白菜', type: '蔬菜' },
                    { id: '002', name: '萝卜', type: '蔬菜' },
                    { id: '003', name: '丝瓜', type: '蔬菜' },
                    { id: '004', name: '苹果', type: '水果' },
                    { id: '005', name: '香蕉', type: '水果' }

                ]
            },
            watch:{
                keyWord:{
                    // immediate在watch里面声明了之后会立马执行handler里面的函数
                    immediate:true,
                    // 没输入就是空串，空串就是都包含
                    handler(val){
                    this.filFoodList=this.foodList.filter((p)=>{
                        // 是否包含字符
                        return p.name.indexOf(val) !== -1
                    })
                }
                }
                
            }
        })
</script>

方法二：用computed实现

<script type="text/javascript">
 Vue.config.productionTip = false;
new Vue({
            el: '#root',
            data: {
                keyWord: '',
                foodList: [
                    { id: '001', name: '白菜', type: '蔬菜' },
                    { id: '002', name: '萝卜', type: '蔬菜' },
                    { id: '003', name: '丝瓜', type: '蔬菜' },
                    { id: '004', name: '苹果', type: '水果' },
                    { id: '005', name: '香蕉', type: '水果' }

                ]
            },
            computed:{
                filFoodList(){
                    return this.foodList.filter((p)=>{
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                }
            }
        })
    </script>