使用 v-for 反向循环数字范围？答案

【问题标题】：Looping a number range in reverse using v-for?使用 v-for 反向循环数字范围？
【发布时间】：2019-06-05 23:14:27
【问题描述】：

我有一个简单的 v-for 循环，从 1 到 5 循环了 5 次，但是我想从 5 到 1 反向循环？这可能吗？我正在向列表项添加一个类，我想从顶部到最满填充列表项

添加 |反向不起作用

<div v-for="n in 5 | reverse" :key="n.index">
    <div class="container">
        <ul class="rating">
            <li :class="[ (n <= 5) ? 'fill' :'' ]"></li>
            <li :class="[ (n <= 4) ? 'fill' :'' ]"></li>
            <li :class="[ (n <= 3) ? 'fill' :'' ]"></li>
            <li :class="[ (n <= 2) ? 'fill' :'' ]"></li>
            <li :class="[ (n <= 1) ? 'fill' :'' ]"></li>
        </ul>
        <span>{{ n }}</span>
    </div>
</div>

【问题讨论】：

厚颜无耻的做法{{ 5 - ((n+4) % 5 ) }}

标签： javascript for-loop vue.js

【解决方案1】：

数组过滤器在 v2 中不再有效。但是你可以创建自己的reversed 方法。

"n in [...Array(5).keys()].slice().reverse()" 有效，所以：

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  methods: {
    reverseKeys(n) {
      return [...Array(n).keys()].slice().reverse()
    }
  }
})

.rating, .container {
  display: flex;
  list-style-type: none;
  margin: 0;
}
.rating li {
  width: 1rem;
  height: 1rem;
  border: 1px solid #ddd;
  border-radius: .5rem;
  margin: .1rem;
}
.fill {
  background-color: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="n in reverseKeys(5)" :key="n">
      <div class="container">
          <span>{{ n + 1 }}</span>
          <ul class="rating">
              <li v-for="key in 5" :class="{ fill: key <= n + 1 }" :key="key" />
          </ul>
      </div>
  </div>
</div>

【讨论】：

【解决方案2】：

简单

 <div v-for="i in 5" :key="i" class="my-1 pointer d-flex justify-content-between">
   <div>{{6-i}}</div>
 </div>

【讨论】：

通过内联 if 语句（如 reverse ）在 {{}} 中创建自己的条件？使用 i ：使用 6-i