列表订单基于数量

时间:2017-12-06 13:55:55

标签: vue.js vuejs2 vue-component

如何从top.base编制列表中的数字 现在它是这样的:

瓦伦西亚 - 3
felicia - 2
gisela - 1
kania - 4
tania - 5

但我想制作

gisela - 1
felicia - 2
瓦伦西亚 - 3
kania - 4
tania - 5

继承人的代码

<div id="root" class="ipeka">
<div v-for="list in lists" :key="list.no">
    {{list.name}} - {{list.no}}
</div></div>



<script>
var app = new Vue({
    el:'#root',
    data:{
        lists:[
            {name:'valencia',no:3},
            {name:'felicia',no:2},
            {name:'gisela',no:1},
            {name:'kania',no:4},
            {name:'tania',no:5},
        ]
    }

})

1 个答案:

答案 0 :(得分:2)

这通常使用computed property完成。

&#13;
&#13;
console.clear()

var app = new Vue({
  el: '#root',
  data: {
    lists: [
      { name: 'valencia', no: 3},
      { name: 'felicia', no: 2 },
      { name: 'gisela', no: 1 },
      { name: 'kania', no: 4 },
      { name: 'tania', no: 5 },
    ]
  },
  computed: {
    sortedList() {
      return this.lists.sort((a, b) => a.no - b.no)
    }
  }

})
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div id="root" class="ipeka">
  <div v-for="list in sortedList" :key="list.no">
    {{list.name}} - {{list.no}}
  </div>
</div>
&#13;
&#13;
&#13;