账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue如何进行筛选?
    70
    0
    最近正在学习用uni-app做一个商城,但是到fifter这步出现了问题下面是我的页面,我是希望能做一个多重的筛选,例如我点击价格,这时候会筛选符合价格条件的数,之后我点击房型,会在价格已经筛选的基础上在进行一次筛选,然后我再点击价格,会在房型的筛选条件中再次进行筛选,但我发现两个互选还可以,但我是要做七八个筛选条件的,按照我现在的思路是要写死的,求大佬提供个思路或者方法原生js或者vue或者小程序的方法都可以 clicprice: function(item, index) {//第一层筛选,因为点击事件的函数名是共享的所以要通过是否含有某个字符来判断 if (item.text.indexOf("室") != '-1') { this.cunzi1 = item.text console.log(this.cunzi1) this.fangxing = index this.shai = this.older.filter((value) => { if (this.cunzi2 == '') { return value.numshi == item.text } else if (this.cunzi2.indexOf('元') != '-1') { if (this.cunzi2 == "1500元以下") { return value.price < 1500 && value.numshi == item.text } else if (this.cunzi2 == "1500-3000元") { return value.price >= 1500 && value.price <= 3000 && value.numshi == item.text } else if (this.cunzi2 == "2000-3000元") { return value.price >= 2000 && value.price <= 3000 && value.numshi == item.text } else if (this.cunzi2 == "2500-3000元") { return value.price >= 2500 && value.price <= 3000 && value.numshi == item.text } else if (this.cunzi2 == "3000元以上") { return value.price >= 3000 && value.numshi == item.text } else if (this.cunzi2 == "不限") { return value } else { console.error("出错") } } }) } else if (item.text.indexOf("元") != '-1' || item.text == "不限" ) { this.older = this.houser this.shunxu = index this.cunzi2 = item.text this.shai = this.older.filter((value) => { if (this.cunzi1.indexOf("室") == "-1") { if (item.text == "1500元以下") { return value.price < 1500 } else if (item.text == "1500-3000元") { return value.price >= 1500 && value.price <= 3000 } else if (item.text == "2000-3000元") { return value.price >= 2000 && value.price <= 3000 } else if (item.text == "2500-3000元") { return value.price >= 2500 && value.price <= 3000 } else if (item.text == "3000元以上") { return value.price >= 3000 } else if (item.text == "不限") { return value.price } else { console.error("出错") } } else if (this.cunzi1.indexOf("室") != "-1") { if (item.text == "1500元以下") { return value.price < 1500 && this.cunzi1 == value.numshi } else if (item.text == "1500-3000元") { return value.price >= 1500 && value.price <= 3000 && this.cunzi1 == value .numshi } else if (item.text == "2000-3000元") { return value.price >= 2000 && value.price <= 3000 && this.cunzi1 == value .numshi } else if (item.text == "2500-3000元") { return value.price >= 2500 && value.price <= 3000 && this.cunzi1 == value .numshi } else if (item.text == "3000元以上") { return value.price >= 3000 && this.cunzi1 == value.numshi } else if (item.text == "不限") { return value && this.cunzi1 == value.numshi } else { console.error("出错") } } }); } },
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 年华消逝淡忘 普通会员 1楼

      在Vue中,筛选可以通过数据筛选和DOM操作来实现。以下是一个简单的示例:

      1. 使用数据筛选:

      javascript export default { data() { return { items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, // 更多数据... ], filter: '' }; }, methods: { filterItems() { this.items = this.items.filter(item => item.name.includes(this.filter)); } } };

      在这个示例中,我们首先定义了一个数据对象items,然后定义了一个filter变量用于存储用户的筛选条件。然后我们定义了一个filterItems方法,这个方法会遍历items数组,并使用includes方法来检查每个元素的名称是否包含filter变量。

      1. 使用DOM操作:

      javascript export default { data() { return { items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, // 更多数据... ], filter: '' }; }, methods: { filterItems() { const filteredItems = this.items.filter(item => item.name.includes(this.filter)); this.$emit('filter-items-changed', filteredItems); } } };

      在这个示例中,我们使用了Vue的$emit方法来触发一个事件,这个事件会包含过滤后的数据。然后我们在事件处理器中,使用filterItems方法来获取过滤后的数据,并将这些数据传递给其他组件或方法。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部