如何用Vue.js上的日期列表制作一个列表？

只是有这样一个观点：如何用Vue.js上的日期列表制作一个列表？

<div class="items"> 
    <div class="datemark" data-date="1">Today</div> 
    <div class="item" data-date="1">Item 1</div> 
    <div class="item" data-date="1">Item 2</div> 
    <div class="item" data-date="1">Item 3</div> 

    <div class="datemark" data-date="2">Tommorow</div> 
    <div class="item" data-date="2">Item 1</div> 
    <div class="item" data-date="2">Item 2</div> 
    <div class="item" data-date="2">Item 3</div> 
</div>

这样的数据：

data = [ 
    1: { 
     human: 'Today', 
     date: 1, 
     items: [ 
      item1: { 
       name: 'test', 
       date: 1 // possible here 
      }, 
      item2: {...}, 
     ] 
    }, 
    2: { 
     human: 'Tommorow', 
     date: 2, 
     items: [ 
      item1: {...}, 
      item2: {...}, 
     ] 
    } 
]

，也可以是：

data = [ 
    item1: { 
     name: 'test', 
     date: 1 // possible here 
    }, 
    item2: { 
     name: 'other', 
     date: 2 // possible here 
    }, 
    ... 
]

如何使它工作，并且可以进行排序倒序/ ASC通过日期标记和'内部'日期标记范围，如果它有不同的小时和分钟？

尝试v-但只有简单的列表，如何与日期？

谢谢！

来源

2017-08-14 Андрей Мильнер

我已经有了答案，但首先，是否可以更好地考虑数据，比如使用数组？而且，你可以重构'item1'，'item2'到一个数组吗？ @АндрейМильнер – kevguy

@ kevlai22做了它，它可以是两种类型的数据，其次是更好的原因第一次写是从第二次解析的项目按日期分割，日期是一个时间戳，你可以猜测，只需使用简单的数字为一个例 –

你不必像这样做，使用computed属性，而不是，你可以看到我用slice，那是因为我想在阵列复制，而不是代替排序的元素：

const app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    order: 'ASC', 
 
    list: [ 
 
     { 
 
      name: 'item1', 
 
      date: 1 // possible here 
 
     }, 
 
     { 
 
      name: 'item2', 
 
      date: 2 // possible here 
 
     }, 
 
     { 
 
      name: 'item3', 
 
      date: 3 // possible here 
 
     }, 
 
     { 
 
      name: 'test', 
 
      date: 4 // possible here 
 
     }, 
 
     { 
 
      name: 'other', 
 
      date: 5 // possible here 
 
     } 
 
    ] 
 
    }, 
 
    computed: { 
 
     sortedList() { 
 
      return this.list.slice(0) 
 
      .sort((a, b) => { 
 
       if (this.order === 'ASC') { 
 
        return b.date - a.date; 
 
       } 
 
       return a.date - b.date; 
 
      }) 
 
     } 
 
    }, 
 
    methods: { 
 
     toggleSort(type){ 
 
      this.order = type; 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> 
 
<div id="app"> 
 
    <div> 
 
    <button v-on:click="toggleSort('ASC')">ASC</button> 
 
    <button v-on:click="toggleSort('DSC')">DSC</button> 
 
    </div> 
 
    <div> 
 
    <div class="datemark" v-for="item in sortedList"> 
 
     <div class="item">{{item.name}}</div> 
 
    </div> 
 
    </div> 
 
</div>

，谨供参考，如果你实际做真实日期比较，用这个来代替”

array.sort(function(a,b){ 
    // Turn your strings into dates, and then subtract them 
    // to get a value that is either negative, positive, or zero. 
    return new Date(b.date) - new Date(a.date); 
});

来源

2017-08-14 20:02:54 kevguy

如何用Vue.js上的日期列表制作一个列表？

回答

相关问题