SOURCE

<div id="app">
	<food></food>
</div>

<template id="food">
	<section>
		<textarea  cols="30" rows="10" v-model.trim="menu"></textarea>
        <h2>今天吃{{food}}</h2>
        <button @click="start">开始</button>
    </section>
</template>

<script>
    let app = new Vue({
        el:"#app",
        data:{},
        components:{
            food:{
                template:"#food",
                data(){
                    return {
                        menu:"炒饭 麻辣烫 粥 肠粉 沙县小吃 汉堡 酸菜鱼 炒粉 奥尔良鸡腿鸡翅 清蒸排骨 玉米排骨汤 猪脚饭 叉烧饭 烧鸭饭 腊肠蒸饭 番茄炒蛋 自助餐 烧烤 黄焖鸡 手撕鸡 盐焗鸡 椒盐排骨 虾仁炒蛋 日本豆腐煲 红烧茄子 披萨 西北风 东南风 火锅 韩国料理  盐酥鸡 芋圆椰奶 鸡肉卷 虎皮凤爪",
                        foodList:[],
                        food:"",
                    }   
                },
                methods:{
                    start(){
                        if(this.menu.length){
                            this.foodList = this.menu.split(" ");
                            let i = 0;
                            let time = setInterval(()=>{
                                if(i==this.foodList.length){
                                    this.food = this.foodList[Math.floor(Math.random()*this.foodList.length)]
                                    clearInterval(time)
                                }else{
                                    this.food = this.foodList[i++]
                                }
                                },20);
                        }else{
                            alert("请输入菜单")
                        }
                    }
                }
            }
        }
    })
</script>