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

Question

我有一个简单的 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>

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