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

Posted 2023-02-22

【中文标题】如何使用 v-for 在 VueJS 中重写此代码？

【英文标题】：How I rewrite this code in VueJS using v-for?

【发布时间】：2019-08-19 06:15:35

【问题描述】：

如何使用 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>

【问题讨论】：

使用 vuejs 迁移 laravel 模板

【参考方案1】：

我认为您不能以与刀片相同的方式执行此操作，但如果您要减少的是 product.average_rating，那么您可以在您提供的代码块中的任何位置将 product.average_rating 替换为 (product.average_rating - r + 1) .像这样：

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

【讨论】：

你能举个例子吗？

@UttaraInfoTech 用示例更新了我的答案。