仿大众点评——美食列表

最新推荐文章于 2023-10-08 15:10:20 发布

Feather_74

最新推荐文章于 2023-10-08 15:10:20 发布

阅读量378

点赞数

分类专栏： Vue项目之仿大众点评文章标签： css html vue.js

本文链接：https://blog.csdn.net/qq_44997147/article/details/103673142

版权

Vue项目之仿大众点评专栏收录该内容

12 篇文章 1 订阅

订阅专栏

图

在这里插入图片描述

代码

template

<template>
  <div id="app">
    <div class="fl-flex" v-for="(index,key) in restaurant.Restaurant" v-bind:key="key">
      <div class="flex1">
        <div class="qmth" v-if="index.RestaurantLabel==1"></div>
        <img class="BusinessImg" :src="index.RestaurantImg" alt />
      </div>
      <div class="flex8">
        <div class="restaurantName">
          {{index.RestaurantName}}
          <span
            v-for="(item,key) in index.RestaurantName1"
            v-bind:key="'name'+key"
          >
            <span :class="item" class="marks"></span>
          </span>
        </div>
        <div class="rows2">
          <span :class="index.RestaurantStar" class="DiscountImg"></span>
          <span class="tiao">{{index.EvaluationNumber}}条</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <span class="ren">￥{{index.RestaurantAverage}}/人</span>
        </div>
        <div class="rows3">
          <span class="address">{{index.RestaurantArea}}</span>
          <span class="foodType">{{index.RestaurantType}}</span>
        </div>
        <div class="rows4" v-if="index.RestaurantCondition!=''">
          <span
            class="quality"
            v-for="(item,key) in index.RestaurantCondition"
            v-bind:key="'all'+key"
          >{{item}}</span>
        </div>
        <div class="rows5" v-if="index.RestaurantMark1!=''">
          <span class="marks" :class="index.RestaurantMark1"></span>
          {{index.RestaurantMark1s}}
        </div>
        <div class="rows6" v-if="index.RestaurantMark2!=''">
          <span class="marks" :class="index.RestaurantMark2"></span>
          {{index.RestaurantMark2s}}
        </div>
      </div>
    </div>
  </div>
</template>