如何使用v-for在VueJS中重写此代码？

Question

如何使用v-for在vuejs中使用以下代码？

@php $rating = 3; @endphp

@foreach(range(1,5) as $r)
<span class="fa-stack" style="width:1em">
    <i class="far fa-star fa-stack-1x"></i>

    @if($rating >0)
        @if($rating >0.5)
          <i class="fas fa-star fa-stack-1x"></i>
        @else
          <i class="fas fa-star-half fa-stack-1x"></i>
        @endif
    @endif

    @php $rating--; @endphp
</span>
@endforeach

我用下面的方法。 但是我不知道如何降低评分。

<span class="fa-stack" style="width:1em" v-for="r in 5">
    <i class="far fa-star fa-stack-1x"></i>
    <i class="fas fa-star fa-stack-1x" v-if="product.average_rating > 0  && product.average_rating > 0.5"></i>
    <i class="fas fa-star-half fa-stack-1x" v-if="product.average_rating > 0  && !(product.average_rating > 0.5)"></i>
</span>

Answer 1

我认为您无法以与Blade中相同的方式进行操作，但是如果要减少的是product.average_rating ，则可以在代码中的任何位置用(product.average_rating - r + 1)替换product.average_rating 。阻止您提供。 像这样：

<span class="fa-stack" style="width:1em" v-for="r in 5">
    <i class="far fa-star fa-stack-1x"></i>
    <i class="fas fa-star fa-stack-1x" v-if="(product.average_rating - r + 1) > 0  && (product.average_rating - r + 1) > 0.5"></i>
    <i class="fas fa-star-half fa-stack-1x" v-if="(product.average_rating - r + 1) > 0  && !((product.average_rating - r + 1) > 0.5)"></i>
</span>