用vue3写一个要求有以下几个选项：西红柿、鸡蛋、米饭、葱、面请随机选择几种食材，生成对应食物

好的，以下是一个使用 Vue 3 编写的代码，包含一个复选框列表和一个按钮，点击按钮后会随机生成一个由选中的食材组成的食物名称： ```html <!DOCTYPE html> <html> <head> <title>随机生成食物</title> <meta charset="UTF-8"> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return { ingredients: [ { name: "西红柿", checked: false }, { name: "鸡蛋", checked: false }, { name: "米饭", checked: false }, { name: "葱", checked: false }, { name: "面", checked: false } ], foodList: { "tomato-egg-rice": ["西红柿炒鸡蛋盖饭", ["西红柿", "鸡蛋", "米饭"]], "scallion-noodles": ["葱油拌面", ["葱", "面"]], "omelette-rice": ["蛋包饭", ["鸡蛋", "米饭"]], "tomato-rice": ["西红柿炒饭", ["西红柿", "米饭"]] }, foodResult: "" }; }, methods: { generateFood() { const ingredients = this.ingredients.filter(ingredient => ingredient.checked); const foodKeys = Object.keys(this.foodList); const randomFoodKey = foodKeys[Math.floor(Math.random() * foodKeys.length)]; const randomFood = this.foodList[randomFoodKey]; const ingredientsText = randomFood[1].filter(ingredient => { return ingredients.some(selectedIngredient => selectedIngredient.name === ingredient); }).join(", "); if (ingredientsText.length > 0) { this.foodResult = "使用了" + ingredientsText + "等食材的" + randomFood[0]; } else { this.foodResult = randomFood[0]; } } } }); </script> </head> <body> <div id="app"> <h1>随机生成食物</h1> <p>请选中至少一种食材：</p> <form> <label v-for="(ingredient, index) in ingredients" :key="index"> <input type="checkbox" v-model="ingredient.checked">{{ ingredient.name }} </label><br> <br> <button type="button" @click="generateFood">生成食物</button> </form> <br> <p>{{ foodResult }}</p> </div> </body> </html> ``` 你可以将此代码复制到一个 HTML 文件中，并在浏览器中打开，即可看到一个使用 Vue 3 实现的界面。每次点击 “生成食物” 按钮时，代码将会随机选择一个食物，并将其名称显示在页面中，同时会根据选中的食材生成食物的说明。例如，如果选中了西红柿和米饭，可能会生成类似于“使用了西红柿、米饭等食材的西红柿炒饭”这样的结果。

阅读全文

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通