layui+vue实现评分展示

  <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，所以样式上会自动进行渲染。
这种方式一般使用在前后端不分离的项目中。