Question

我有10个黑色的星星，想用一个迭代来绘制它们。我通过类绑定10个不同的跨度来绘制它们，但我只希望一个跨度（最多两个）而不是10。

例如，如果我的“星级”数据等于4，则我希望有4个已涂漆的星星和6个未涂漆的星星。

您应该在下面检查我的笔。谢谢。

https://jsfiddle.net/kaangokdemir/sbecv2fh/

new Vue({
  el: "#app",
  data: {
    painted: 4,
    unpainted: 6
  }
});

.checked {
  color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/latest/css/pro.min.css" media="all">


<div id="app">
  <span class="fa fa-star" :class="{checked: painted>0}"></span>
  <span class="fa fa-star" :class="{checked: painted>1}"></span>
  <span class="fa fa-star" :class="{checked: painted>2}"></span>
  <span class="fa fa-star" :class="{checked: painted>3}"></span>
  <span class="fa fa-star" :class="{checked: painted>4}"></span>
  <span class="fa fa-star" :class="{checked: painted>5}"></span>
  <span class="fa fa-star" :class="{checked: painted>6}"></span>
  <span class="fa fa-star" :class="{checked: painted>7}"></span>
  <span class="fa fa-star" :class="{checked: painted>8}"></span>
  <span class="fa fa-star" :class="{checked: painted>9}"></span>
</div>

Answer 1

这是3个变体。所有人都在使用v-for，其范围为：https://vuejs.org/v2/guide/list.html#v-for-with-a-Range

第一个只是假设总有10个星星。

第二和第三显示了两种不同的组合painted和unpainted的方式。

new Vue({
  el: "#app",
  data: {
    painted: 4,
    unpainted: 16
  }
});

.checked {
  color: orange;
}

.row {
  display: flex;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/latest/css/pro.min.css" media="all">


<div id="app">
  <div class="row">
    <span
      v-for="index in 10"
      class="fa fa-star"
      :class="{checked: painted >= index}"
    ></span>
  </div>
  <div class="row">
    <span
      v-for="index in painted + unpainted"
      class="fa fa-star"
      :class="{checked: painted >= index}"
    ></span>
  </div>
  <div class="row">
    <span
      v-for="index in painted"
      class="fa fa-star checked"
    ></span>
    <span
      v-for="index in unpainted"
      class="fa fa-star"
    ></span>
</div>
</div>

我在包装器上添加了row类。这会启用弹性框，以使恒星之间保持一致的水平间距。

迭代类绑定到跨度

1 个答案: