<div class="evalutor-item">
<div :id="'service' + index" class="layui-inline">
<span class="layui-inline">评分</span>
<ul class="layui-rate">
<li class="layui-inline" v-for="(item, index) in 5">
<i class="layui-icon" :class="todo.service > index ? 'layui-icon-rate-solid' : 'layui-icon-rate'"></i>
</li>
</ul>
<span class="layui-inline">{{todo.service}}星</span>
</div>
</div>
将以上代码,包含在vue循环(v-for)中。由于引入了layui.css,所以样式上会自动进行渲染。
这种方式一般使用在前后端不分离的项目中。