vue 使用计算属性匹配搜索、排序

最新推荐文章于 2023-08-20 09:45:08 发布

webGather

最新推荐文章于 2023-08-20 09:45:08 发布

阅读量675

点赞数

分类专栏： vue知识汇总文章标签： vue

本文链接：https://blog.csdn.net/qq_36493811/article/details/120194128

版权

该博客探讨了Vue框架中如何利用计算属性(computed)来实现数据的搜索和排序功能。首先介绍了v-model在表单元素上的应用，用于双向数据绑定。接着讲解了JavaScript的sort()方法，用于对数组进行升序或降序排序。然后重点阐述了计算属性的概念，当其依赖的数据发生变化时，会自动更新对应的视图。文中通过一个实例展示了keyWord变化如何触发计算属性，从而更新视图。

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

1、v-model：数据发生改变，视图层也随之改变；主要使用于表单元素上

2、sort() 对数组元素进行排序，并返回改变后的数组；排序顺序可以是字母或数字，并按升序或降序。

3、computed：写法像一个函数，实际是一个属性；一定会有返回值；重点只要和计算属性相关的数据发生了改变，就会触发，重新执行代码

4、以下示例中，keyWord发生了改变，触发computed，

<template>
  <div class="filters">
    <input
      type="text"
      v-model="keyWord"
    >
    <button @click="sortType = 1">年龄升序</button>
    <button @click="sortType = 2">年龄降序</button>
    <button @click="sortType = 0">原顺序</button>
    <div class="list">
      <ul>
        <li
          v-for="item in filterList"
          :key="item.id"
        >{
  {item.name}} - {
  {item.age}}</li>
      </ul>
    </div>