先给大家展示下效果图，如果感觉不错，请参考实现代码

1、先获取门店下的所有菜品类型、菜品名称、菜品id(列表),也就是最大数据量

这个$ http。post(ceshiApi ' getcyfood and foodtyforshopid '，{shopId:this.shopId}，{ 0仿真器：true，credentials: true }).然后（函数如果数据。type==' success '){ this。食物列表=RES . data。数据。cyfoodtype列表；}});2、获取该菜谱已经拥有（勾选了哪些)的菜品id(列表)

这个$ http。post(ceshiApi ' getCyMenuFoodByMenuId '，{'cyMenuId': id}，{ 0仿真器：true，credentials: true }).然后（函数如果数据。type==' success '){让data=RES . data。数据；let list=[]；用于(设I=0；一。数据。长度；i ) { list.push(data[i]).foodDefineId)；} this . foodlistid=list } else { aler rors(RES . data。消息)；}});3、在超文本标记语言页面使用某视频剪辑软件对两数据进行对比，菜品编号相同就打勾

div class=' modal-body ' div class=' scroll _ name ' div class=' new recipe ' style=' overflow-y : scroll；'height: 410px'div v-for='食物清单'中的项目style=' display : flex flex-wrap : wrap；'标签样式='右边距： 20px'{ { item。name } }/label div class=' food-list ' div-for=' item。cyfoodefinelist ' label input class=' ace check _ son ' type=' checkbox ' : value=' food。id ' v-model=' foodListId ' span class=' LBL ' { food。名称} }/span/label/div/div/div/div/div总结

以上所述是小编给大家介绍的vue.js做一个简单的编辑菜谱功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！