【Vue3】2-12 : 【案例】搜索关键词加筛选条件的综合

本书目录:点击进入

一、【案例】搜索关键词加筛选条件的综合

1.1、逻辑

1.2、效果

1.3、json数据 - 02-data.json

1.4、代码


一、【案例】搜索关键词加筛选条件的综合

1.1、逻辑

  • 计算属性 - 绑定list,并过滤

  • input  双向绑定 - 当input改变时,计算属性过滤name

  • button组 双向绑定 - 当input改变时,计算属性过滤性别

1.2、效果

【Vue3】2-12 : 【案例】搜索关键词加筛选条件的综合_第1张图片

1.3、json数据 - 02-data.json

[
  {
    "id": 1,
    "name": "小明",
    "gender": "女",
    "age": 20
  },
  {
    "id": 2,
    "name": "小强",
    "gender": "男",
    "age": 18
  },
  {
    "id": 3,
    "name": "大白",
    "gender": "女",
    "age": 25
  },
  {
    "id": 4,
    "name": "大红",
    "gender": "男",
    "age": 22
  }
]

1.4、代码


  
  • {{ item.name }}, {{ item.gender }}, {{ item.age }}

你可能感兴趣的:(架构师之路-java,前端,java,javascript,计算属性,筛选jsonlist)