vuejsのテンプレートでループを逆方向に実行する

Question

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

recentは配列です。

最近の内容を0からn-1にリストしたくありません。

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

>しかし、それは動作しませんでした -

代わりに私が試した0

へのn-1からそれを一覧表示します。

Answer 1

解決策1：あなたが実際にrecent.slice().reverse()を使用して、それを反復処理する前に、テンプレート内で直接配列を逆にすることができますテンプレート

で直接配列を逆にします。 this.recentは実際に配列自体ではないので、.slice()を使用する必要があります。しかし、私はあなたのテンプレートにロジックを配置することを意味するので、私はこの方法を好まない。

<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 2

forループ形式のv-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>

Answer 3

あなたは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>