在vuejs中的模板中向后运行循环

Question

<template>
 <li v-for="r in recent">
  {{r}}
 </li>
</template>

最近是一个数组。

我不想列出最近的内容从0到n-1。

相反，我想将它从n-1列为0。

我试过了 - ＆gt;

 <template>
 <li v-for="r=recent.length-1 ; r>=0 ; r--">
  {{r}}
 </li>
</template>

但是，它没有用。

Answer 1

您应该使用Array.prototype.reverse（）

来源：link

在您的计算

中

export default Vue.extend({
        name: 'mainActivity',
        data (){
            return{
                stuff: ['a', 'b', 'c', 'd']
            }
        },
      computed:{
              reverseArray(){return this.stuff.reverse()}
       },
        created(){}
    })

<强> HTML

<template>
 <li v-for="r in reverseArray">
  {{r}}
 </li>
</template>

Answer 2

解决方案1：直接在模板中反转数组

在使用recent.slice().reverse()进行迭代之前，您可以直接在模板中反转数组。使用.slice()是必要的，因为this.recent实际上不是数组本身。但是，我不喜欢这种方法，因为这意味着在模板中放置逻辑。

<template>
 <li v-for="r in recent.slice().reverse()">
  {{r}}
 </li>
</template>

new Vue({
  el: '#list',
  data: {
    recent: [
      'Lorem',
      'ipsum',
      'dolor',
      'sit',
      'amet'
    ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<ul id="list">
  <li v-for="r in recent.slice().reverse()">
    {{ r }}
  </li>
</ul>

解决方案2：使用计算属性

正如@vbranden所说，你可以简单地在一个方法中反转一个数组并在v-for中使用它。这是我的首选方法。

new Vue({
  el: '#list',
  data: {
    recent: [
      'Lorem',
      'ipsum',
      'dolor',
      'sit',
      'amet'
    ]
  },
  computed: {
    recentReversed: function() {
      return this.recent.reverse();
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<ul id="list">
  <li v-for="r in recentReversed">
    {{ r }}
  </li>
</ul>

Answer 3

v-for没有for循环形式。有一个range form，您可以使用它来获得您想要的效果（使用简单的数学运算）。

你可以用计算机做同样的事情，正如vbranden在评论中指出的那样。

new Vue({
  el: '#app',
  data: {
    stuff: ['a', 'b', 'c', 'd']
  },
  computed: {
    stuffIndexCountdown() {
      return this.stuff.map((_, i) => i).reverse();
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <div v-for="i in stuff.length">
    {{stuff.length - i}}
  </div>
  <hr>
  <div v-for="i in stuffIndexCountdown">
    {{i}}
  </div>
</div>