Vue实现商品分类菜单数量提示功能实现商品分类菜单数量提示功能
如上所示，这篇我们将商品分类菜单显示数量的提示完善，是软件更加易于使用。
好先让我回顾一下上节课的内容，Goods组件，数量提示功能最终需要在Goods组件内显示。
<template>
<div class="goods">
<div class="menu-wrapper" ref="menuScroll">
<ul>
<!--专场-->
<li class="menu-item" :class="{'current':currentIndex===0}" @click="selectMenu(0)">
<p class="text">
<img :src="container.tag_icon" v-if="container.tag_icon" class="icon">
{{container.tag_name}}
</p>
</li>
<li
class="menu-item"
v-for="(item,index) in goods"
:class="{'current':currentIndex===index+1}"
@click="selectMenu(index+1)"
>
<p class="text">
<img :src="item.icon" v-if="item.icon" class="icon">
{{item.name}}
</p>
<i class="num" v-show="calculateCount(item.spus)">{{calculateCount(item.spus)}}</i>//通过i标签展示数量
</li>
</ul>
</div>
<!-- 右侧商品列表 -->
<div class="foods-wrapper" ref="foodScroll">
<!--专场-->
<ul>
<li class="container-list food-list-hook">
<div v-for="item in container.operation_source_list">
<img :src="item.pic_url">
</div>
</li>
<!-- 具体分类-->
<li v-for="item in goods" class="food-list food-list-hook">
<h3 class="title">{{item.name}}</h3>
<!--具体商品列表-->
<ul>
<li v-for="food in item.spus" class="food-item">
<div class="icon" :style="head_bg(food.picture)"></div>
<div class="content">
<h3 class="name">{{food.name}}</h3>
资源评论
