【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、效果
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>