Vue中使用Switch开关用来控制商品的上架与下架情况、同时根据数据库商品的状态反应到前台、前台修改商品状态保存到数据库

一般后台对商品的信息管理、包含商品的上架与下架。为了提高用户的体验、将商品上下架的操作做成开关的形式。同时后台数据库中保存的商品状态能够根据开关状态改变。

1、效果展示

这种效果:== 当开关是开启状态、代表此时商品是上架状态。商品页面可以看到对应的商品。如果开关是关闭状态、代表该商品暂未上架，商品页面看不到该商品

1.1 前端页面效果

1.2 数据库存储

数据库的状态和上图的状态是一致的。数据库可以存放0、1的形式来表示商品信息的上下架状态

2、具体实现过程

2.1 查看官网组件库

调用官网eleentui中的组件库、可以自己根据需要设置开关开启和关闭时的文字描述、以及开关的颜色。
例如

2.2 修改开关状态、同时修改数据库保存的商品状态