温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue支持搜索与筛选的用户列表如何实现

发布时间:2022-10-24 09:55:53 来源:亿速云 阅读:134 作者:iii 栏目:开发技术

这篇文章主要讲解了“Vue支持搜索与筛选的用户列表如何实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue支持搜索与筛选的用户列表如何实现”吧!

1. 常规风格的示例工程开发

首先新建一个名为 normal.html 的测试文件,在HTML文件的head标签中引入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>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .container {
            margin: 50px;
        }
        .content {
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="Application"></div>
    <script>
        const App = Vue.createApp({
 
        })
        App.mount('#Application')
    </script>
</body>
</html>

为了方便逻辑的演示,我们先不添加样式,先从逻辑上梳理这样一个简单页面应用的开发思路。

第一步,设计页面的根组件的数据框架,分析页面的功能需求,主要有三个:能够渲染用户列表、能够根据输入的关键字进行检索。因此,我们至少需要三个响应式的数据:用户列表数据、性别筛选字段和关键词字段。

定义 组件的data选项如下:

data() {
       return {
            //性别筛选字段
            sexFilter : -1,
            //展示的用户列表数据
            showDatas : [],
            //搜索的关键词
            sarchKey : ""
        }
}

上面定义的属性中,sexFilter 字段的取值可以是 -1、0或1 。 -1表示全部,0表示性别男,1表示性别女。

第二步,思考页面需要支持的行为,首先从网络上请求用户数据,将其渲染到页面上(使用延时函数来模拟这一过程),要支持性别筛选功能,需要定义一个筛选函数来完成,同样要实现关键词检索功能,也需要定义一个检索函数。

定义组件的methods选项如下:

methods: {
        //获取用户数据
        queryAllData() {
             this.showDatas = mock
        },
        //进行性别筛选
        filterData() {
             if(this.sexFilter == -1) {
                  this.showDatas = mock
             }else {
                  this.showDatas = mock.filter((data) => {
                       return data.sex == this.sexFilter
                   })
             }
         },
         //进行关键词检索
         searchData() {
             if(this.searchKey.length == 0) {
                   this.showDatas = mock
             }else {
                   this.showDatas = mock.filter((data) => {
                       //名称中包含输入的关键词则表示匹配成功
                       return  data.name.indexOf(this.searchKey) != -1
                   })
             }
         }
}

对上面的代码进行汇总,mock变量是本地定义的模拟数据,方便我们测试效果,代码如下:

let mock = [
            {
                name : "小王",
                sex : 0
            },
            {
                name : "小红",
                sex : 1
            },
            {
                name : "小李",
                sex : 1
            },
            {
                name : "小张",
                sex : 0
            }
        ]

定义好了功能函数,我们需要在合适的时机对其进行调用,queryAllData 方法可以在组件挂载时调用来获取数据,当页面挂载后,延时3秒会获取到测试的模拟数据,代码如下:

mounted() {
        //模拟请求过程
        setTimeout(() => {
              this.queryAllData
        }, 3000);
},

对于性别筛选和关键词检索功能,可以监听对应的属性,当这些属性发生变化时,进行筛选或检索行为。定义组件的watch选项如下:

watch: {
     sexFilter(oldValue,newValue) {
          this.filterData()
     },
     searchKey(oldValue,newValue) {
          this.searchData()
     }
}

至此,我们编写完成当前页面应用的所有逻辑代码。还有第三步需要做,将页面渲染所需的HTML框架搭建完成,示例代码如下:

<div id="Application">
        <div class="container">
            <div class="content">
                <input type="radio" :value="-1" v-model="sexFilter"/>全部
                <input type="radio" :value="0" v-model="sexFilter"/>男
                <input type="radio" :value="1" v-model="sexFilter"/>女
            </div>
            <div class="content">搜索:<input type="text" v-model="searchKey" /></div>
            <div class="content">
                <table border="1" width="300px">
                    <tr>
                      <th>姓名</th>
                      <th>性别</th>
                    </tr>
                    <tr v-for="(data, index) in showDatas">
                      <td>{{data.name}}</td>
                      <td>{{data.sex == 0 ? '男' : '女'}}</td>
                    </tr>
                    </table>
            </div>
        </div>
    </div>

运行代码,可以看到一个支持筛选和检索的用户列表应用以及完成了,效果如下图所示:

Vue支持搜索与筛选的用户列表如何实现

Vue支持搜索与筛选的用户列表如何实现

Vue支持搜索与筛选的用户列表如何实现

2. 使用组合式API重构用户列表页面

Vue3提供的组合式API的开发风格可以很好的解决这个问题,我们可以将逻辑都梳理在setup方法中,相同的逻辑点聚合性更强,更易阅读和扩展。

使用组合式API重写后的完整代码如下:

let mock = [
            {
                name:"小王",
                sex:0
            },{
                name:"小红",
                sex:1
            },{
                name:"小李",
                sex:1
            },{
                name:"小张",
                sex:0
            }
        ]
        const App = Vue.createApp({
            setup() {
                // 用户列表
                const showDatas = Vue.ref([])
                const queryAllData = () => {
                    // 模拟请求过程
                    setTimeout(()=>{
                        showDatas.value = mock
                    }, 3000);
                }
                // 组件挂载是请求数据
                Vue.onMounted(queryAllData)
                let sexFilter = Vue.ref(-1)
                let searchKey = Vue.ref("")
                let filterData = () => {
                    if (sexFilter.value == -1) {
                        showDatas.value = mock
                    } else  {
                        showDatas.value = mock.filter((data)=>{
                            return data.sex == sexFilter.value
                        })
                    }
                }
                searchData = () =>  {
                    if (searchKey.value.length == 0) {
                        showDatas.value = mock
                    } else  {
                        showDatas.value = mock.filter((data)=>{
                            return data.name.search(searchKey.value) != -1 
                        })
                    }
                }
                // 添加侦听
                Vue.watch(sexFilter, filterData)
                Vue.watch(searchKey, searchData)
                return {
                    showDatas,
                    searchKey,
                    sexFilter
                }
            },
            template: `
            <div class="container">
                <div class="content">
                    <input type="radio" :value="-1" v-model="sexFilter"/>全部
                    <input type="radio" :value="0" v-model="sexFilter"/>男
                    <input type="radio" :value="1" v-model="sexFilter"/>女
                </div>
                <div class="content">搜索:<input type="text" v-model="searchKey" /></div>
                <div class="content">
                    <table border="1" width="300px">
                        <tr>
                        <th>姓名</th>
                        <th>性别</th>
                        </tr>
                        <tr v-for="(data, index) in showDatas">
                        <td>{{data.name}}</td>
                        <td>{{data.sex == 0 ? '男' : '女'}}</td>
                        </tr>
                        </table>
                </div>
            </div>
            `
        })
        App.mount("#Application")

在使用组合式API编写代码时,特别要注意,对于需要使用的响应式数据,要使用 ref 方法或 reactive方法进行包装。

3. 优化用户列表页面

在上一节中我们通过组合式API重写了用户列表页面,但是现在页面筛选和搜索功能都比较生硬,在本节,我们尝试给他添加一些动画效果。

首先要实现列表动画效果,需要对定义的组件模板结果做一下改动,示例代码如下:

template: `
            <div class="container">
                <div class="content">
                    <input type="radio" :value="-1" v-model="sexFliter"/>全部
                    <input type="radio" :value="0" v-model="sexFliter"/>男
                    <input type="radio" :value="1" v-model="sexFliter"/>女
                </div>
                <div class="content">搜索:<input type="text" v-model="searchKey" /></div>
                <div class="content">
                    <div class="tab" width="300px">
                        <div>
                        <div class="item">姓名</div>
                        <div class="item">性别</div>
                        </div>
                        <transition-group name="list">
                            <div v-for="(data, index) in showDatas" :key="data.name">
                            <div class="item">{{data.name}}</div>
                            <div class="item">{{data.sex == 0 ? '男' : '女'}}</div>
                            </div>
                        </transition-group>
                    </div>
                </div>
            </div>
            `

对应的,定义CSS样式与动画样式如下:

        .container {
            margin: 50px;
        }
        .content {
            margin: 20px;
        }
        .tab {
            width: 300px;
            position: absolute;
        }
        .item {
            border: gray 1px solid;
            width: 148px;
            text-align: center;
            transition: all 0.8s ease;
            display: inline-block;
        }
        .list-enter-active {
            transition: all 1s ease;
        }
        .list-enter-from,
        .list-leave-to {
            opacity: 0;
        }
        .list-move {
            transition: transform 1s ease;
        }
        .list-leave-active {
            position: absolute;
            transition: all 1s ease;
        }

现在运行代码,可以看到当对用户列表进行筛选、搜索时,列表的变化以及有了动画过渡效果:

Vue支持搜索与筛选的用户列表如何实现

感谢各位的阅读,以上就是“Vue支持搜索与筛选的用户列表如何实现”的内容了,经过本文的学习后,相信大家对Vue支持搜索与筛选的用户列表如何实现这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI