vue中列表数据的搜索和排序

最新推荐文章于 2024-08-05 11:24:07 发布

xiaoxiao1777

最新推荐文章于 2024-08-05 11:24:07 发布

阅读量1.5k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/xiaoxiao1777/article/details/105866061

版权

本文探讨了在Vue中实现列表数据搜索和排序的基本思路。重点在于理解计算属性在这一过程中的作用，即一个组件的状态变化如何影响其他组件的状态。通过输入框的值改变搜索结果，以及通过按钮触发特定排序，展示了数据驱动视图的核心理念。同时，列举了常见的应用场景，如输入搜索关键字更新显示内容，以及点击按钮执行预设排序操作。

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

想法：

1.搜索和排序属于基本功能，很多地方会用到，其实语言的语法规则仅仅属于基础知识，位于掌握的最下层，这些基本功能才是必须要熟练掌握的，因为只有依靠这些基本功能才能构成一个完整的页面，无论是移动端还是浏览器端，实现这些基本功能的内在思想是一致的，互相之间有借鉴作用，有一个总结一个。

2.vue中搜索和排序依靠的都是计算属性，本质都是：一个控件上变量值的改变引起另一个控件上变量值的改变。

3.页面中的应用场景：

3.1 一个输入框上输入值，另一个显示框上改变值

3.2 点击某个功能按钮，显示框上值有了改变，虽然按钮上看不到变量值，但可以通过给它触发的方法上设定参数变量，此变量在data中设定一个默认值，方法触发的时候给定一个不同的值，那么就引发了变量的改变，这里的变量值是认为限定的固定值，与输入框任意值不同，但是思想是相通的，从而在方法实现中进行改变显示框上的变量

实现：

<div>
  <input type="text" v-model="searchName">
  <ul>
    //注意：这里的数组不能为原数组persons，因为最终使用的数组是处理过得新数组
    <li v-for="(p,index) in filterPersons" :key="index">
        {
  {index}}---{
  {p.name}}--