Vue 运用计算属性筛选数组简洁的实现方法

最新推荐文章于 2025-06-12 23:40:42 发布

ting779

最新推荐文章于 2025-06-12 23:40:42 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_46417997/article/details/126921014

Vue 专栏收录该内容

2 篇文章

订阅专栏

本文通过一个具体的Vue应用实例展示了如何使用计算属性(computed)来高效地筛选并展示数据列表。利用filter()和indexOf()函数组合，实现了输入框内容变化时，列表数据的实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 中用computedr计算属性，简洁的代码实现数据筛选

计算属性代码量由于监听属性watch

【设计逻辑】

filter()函数将数组进行筛选返回符合indexOf函数返回符合条件的新数组放到新建的newList（）中去。用 v-for 绑定数据到li 标签中。

代码内有详细关键每一步的完整注释。

【声明】个人的浅薄见解和心得总结，有不对之处还请大神点拨。谢谢！

<div id="app">
    <input type="text" v-model="inputValue" />
    <ul>
    	<li v-for="i in newList">{{i.name}}-{{i.price}}</li>
    </ul>
</div>

<script>
      new Vue({
        el: '#app',
        data: {
          inputValue: '',
          list: [
            { name: '羊绒大衣', price: 1080 },
            { name: '防雨风衣', price: 880 },
            { name: '羊绒长裤', price: 980 },
            { name: '防雨卫裤', price: 480 },
          ],
        },
        computed:{
        	newList(){   //新建一个空数组来接收筛选的值
        		return this.list.filter((i) =>{	 //filter函数是将数组进行筛选返回符合下列返回条件的新数组
        			return i.name.indexOf(this.inputValue) !== -1;  //indexOf函数取得name值中不等于-1的所有值返回作为参数。
        			
        		});
        	},		
        },
       
      });
</script>