vue label 宽度_vue商品详情页面的实现（3.9）

上次我们实现购物车的详情页面，这篇我们继续推进项目，来实现商品详情页面。

商品详情页面的实现

在开始之前我们先看它在页面中的样子：

在首页点击某一商品会展示商品的详细信息。如下图所示：

一创建good组件

创建一个组件 good

• transition 来定义页面展示的形式；

• 使用v-show与变量showFlag来控制显示与隐藏，ref配合BScroll控制页面的滑动；

• 现在结构内出现的数据的引用我们在script内进行处理。

{{food.name}}

{{food.month_saled_content}}

              
              v-show="food.product_label_picture"
              :src="food.product_label_picture"
            >

￥{{food.min_price}}/{{food.unit}}

选规格

{{food.rating.title}}
                (
                {{food.rating.like_ratio_desc}}{{food.rating.like_ratio}}
                )

{{food.rating.snd_title}}

{{comment.user_name}}

{{comment.comment_time}}

{{comment.comment_content}}




二处理数据，行为

• 通过data监听showFlag的状态；

• 通过props传入父组件循环Foods而得到的food数据；

• 方法showView()可以被父组件调用，稍后说明调用形式；

• 方法closeView()绑定在模板退出图标上，用于关闭页面，重置变量showFlag为false；

• 方法addFirst()用来添加一个商品数量；