vue如何篩選數(shù)組里，得到規(guī)定數(shù)字范圍大小區(qū)間的數(shù)據(jù)，如下圖和代碼

如圖

當(dāng)我輸入1和3，點擊確定之后，就只顯示1，2，3（1到3這區(qū)間的數(shù)據(jù)）

<template>
    <div>
        <div>
            <span>過濾</span>
            <input type="number" v-model="number1">
            <span>---</span>
            <input type="number" v-model="number2">
            <button @click="btn">確定</button>
        </div>
        <ul>
            <li v-for="item in data" :key="item.id">
                {{item.id}}--{{item.name}}
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data(){
        return{
            number1:'',
            number2:'',
            data:[
                {id:1,name:"test1"},
                {id:2,name:"test2"},
                {id:3,name:"test3"},
                {id:4,name:"test4"},
                {id:5,name:"test5"},
                {id:6,name:"test6"},
            ]
        }
    },
    methods:{
        btn(){
            // todo
        }
    }
}
</script>

回答

編輯回答

逗婦惱

一條代碼即可!

const result =  this.data.filter(x => x.id < this.number2 && x.id > this.number1 )

2018年8月15日 10:09

編輯回答

淚染裳

v-for=" item in [...data].splice(a,b)"
取 1 2 3
則 a=0 b=3
取 3 4
則 a=3-1 b=2
取 1 2 3 4 5
則 a=0 b=5

默認(rèn)全選
設(shè)置
a=0
b=0
this.b=data.length

2018年9月5日 03:57

編輯回答

胭脂淚

加個：
data1:[],然后循環(huán)顯示data1，

btn(){
    this.data1 = [];
    for(var i=this.number1-1; i<this.number2; i++){
        this.data1.push(this.data[i]);
    }
}

2017年3月22日 08:35

編輯回答

傻丟丟

獲取數(shù)據(jù)時，在數(shù)據(jù)中添加屬性，例如seen，初始默認(rèn)為true，每次觸發(fā)事件，循環(huán)給所有項，符合區(qū)間的設(shè)置為true，不符合的設(shè)置為false；利用v-show去辨識這個屬性。

2018年3月22日 09:20

編輯回答

司令

<li v-for="item in data" :key="item.id" v-if="!hasRange || min <= item.id && item.id <= max">

data: {
    hasRange: false, // 是否設(shè)置了范圍
    min: 0,
    max: 0
},
methods: {
    btn(){
        // 避免用戶 留空 或 大小顛倒
        let nums = [this.number1 || 0, this.number2 || 0];
        this.hasRange = true;
        this.max = Math.max.apply(null, nums);
        this.min = Math.min.apply(null, nums);
    }
}

2017年1月8日 10:10

編輯回答

避風(fēng)港

data() {
  return{
    number1:'',
    number2:'',
    origin: [
      {id:1,name:"test1"},
      {id:2,name:"test2"},
      {id:3,name:"test3"},
      {id:4,name:"test4"},
      {id:5,name:"test5"},
      {id:6,name:"test6"},
    ],
    data: []
  }
},
computed: {
  dataFormat() {
    return this.origin.filter(item => +item.id > +this.number1 && +item.id < +this.number2)
  }
},
methods: {
  btn() {
    this.data = this.dataFormat
  }
}

item.id前面加上+號是類型轉(zhuǎn)為數(shù)值， id可以替換為age之類的，大致原理如上述代碼，你自己再加工一下，甚至可以不需要點擊按鈕，直接把顯示的字段改為這個dataFormat計算屬性

使用計算屬性得到要的值，代碼邏輯相對更清晰一些

2017年2月19日 22:12