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

这篇具有很好参考价值的文章主要介绍了【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 : 【案例】搜索关键词加筛选条件的综合,架构师之路-java,前端,java,javascript,计算属性,筛选jsonlist 文章来源地址https://www.toymoban.com/news/detail-808329.html

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、代码

<body>
  <div id="app">
    <input type="text" v-model="message">
    <button :class="activeGender('全部')" @click="handleGender('全部')">全部</button>
    <button :class="activeGender('男')" @click="handleGender('男')">男</button>
    <button :class="activeGender('女')" @click="handleGender('女')">女</button>
    <ul>
      <li v-for="item in filterList" :key="item.id">{{ item.name }}, {{ item.gender }}, {{ item.age }}</li>
    </ul>
  </div>
  <script>

    let vm = Vue.createApp({
      data() {
        return {
          list: [],
          message: '',
          gender: '全部'
        }
      },
      created(){
        fetch('./02-data.json').then((res)=> res.json()).then((res)=>{
          this.list = res;
        })
      },
      computed: {
        filterList(){
          return this.list
                  .filter((v)=> v.name.includes(this.message))
                  .filter((v)=> v.gender === this.gender || '全部' === this.gender);
        }
      },
      methods: {
        activeGender(gender){
          return { 'active-gender': this.gender === gender };
        },
        handleGender(gender){
          this.gender = gender;
        }
      }
    }).mount('#app');

  </script>
</body>

到了这里，关于【Vue3】2-12 : 【案例】搜索关键词加筛选条件的综合的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！