【Vue基础】列表渲染二：列表过滤和排序（模糊搜索）

最新推荐文章于 2024-08-29 21:28:34 发布

一颗小梨子吖

最新推荐文章于 2024-08-29 21:28:34 发布

阅读量1k

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_45662637/article/details/121228636

版权

本文探讨了如何在Vue.js中利用计算属性和indexOf方法进行列表的模糊搜索过滤，创建的新数组filterPersons不会影响原始数据。同时提到了通过watch监听实现过滤，并介绍如何结合排序功能对搜索结果进行排序。

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

有时，我们想要显示一个数组过滤后的版本，而不实际变更原始数据。在这种情况下，可以创建一个计算属性，来返回filter的数组。

我们使用后计算属性来实现一个名字得模糊搜索（如下），

 <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="输入要查找的姓名" v-model:value="keyWord">
        <ul>
            <li v-for = "(p,index) of filterPersons" :key="p.id">
                {
  {index}}--{
  {p.name}}--{
  {p.age}}--{
  {p.sex}}
            </li>
        </ul>

      
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue生成生产提示。
        new Vue({
            el:'#root',
            data:{
                keyWord:'',
                persons:[
                    {id:'001',name:'张小山',age:18,sex:'男'},
                    {id