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

时间:2019-03-28 12:56:10

标签: php laravel vue.js

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

dataBinding {
        enabled = true
    }

我使用了以下方法。但是我不知道如何降低评分。

@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

1 个答案:

答案 0 :(得分: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>