本書目錄：點(diǎn)擊進(jìn)入
一、【案例】搜索關(guān)鍵詞加篩選條件的綜合
1.1、邏輯
1.2、效果
1.3、json數(shù)據(jù) -?02-data.json
1.4、代碼
一、【案例】搜索關(guān)鍵詞加篩選條件的綜合
1.1、邏輯
-
計(jì)算屬性 - 綁定list，并過濾
-
input ?雙向綁定 - 當(dāng)input改變時，計(jì)算屬性過濾name
-
button組 雙向綁定?- 當(dāng)input改變時，計(jì)算屬性過濾性別文章來源：http://www.zghlxwxcb.cn/news/detail-808329.html
1.2、效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-808329.html
1.3、json數(shù)據(jù) -?02-data.json
[
{
"id": 1,
"name": "小明",
"gender": "女",
"age": 20
},
{
"id": 2,
"name": "小強(qiáng)",
"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>到了這里，關(guān)于【Vue3】2-12 : 【案例】搜索關(guān)鍵詞加篩選條件的綜合的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
