vue實(shí)現(xiàn)餓了么點(diǎn)餐的動(dòng)畫效果

點(diǎn)擊白色的食品區(qū)域
對(duì)應(yīng)的食物名字 價(jià)格 顯示在黃色區(qū)域
結(jié)果類似

應(yīng)該給添加怎么樣的事件

<template>
  <div>
    <div class="order">
      <div class="order-head">
        
      </div>
      <div class = 'border'></div>
      <div class="order-list">
        
      </div>

    </div>
     <div class = "foods-wrapper">
      <div class="fooList" v-for="(item,index) in goods">
        <div v-for="food in item.foods" v-show="name==item.name" class = 'food'>
          <span>{{food.name}}</span>
          <span>￥{{food.price}}</span>
   
          </div>
      </div>
    </div>
  <div class="navMenu">
    <ul>
       <li v-for="(item,index) in goods" :class="isSelected == index?'navMenu-selected':'nav'" @click = 'menuClick(item.name,index)'>
          <span class="text">
            
            {{item.name}}
          </span>
        </li>
    </ul>
    
  </div>
 
 </div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'
export default {
  name: 'navMenu',
   created() {
    axios.get('static/data.json').then((res) => {
      console.log(res.data.goods)
      this.goods = res.data.goods
      
    });
  },
  data() {
    return {
      goods: [],
      isSelected:0,
      name:'food',
      selectedFood: '',
    }
  },
  computed:{
    // selectFoods() {
    //   let foods = []
    //   this.goods.forEach((good) => {
    //     good.foods.forEach((food) => {
    //       if (food.count) {
    //         foods.push(food)
    //       }
    //     })
    //   })
    //   return foods
    // }
  },

  methods:{
    menuClick (name,index) {
    this.isSelected = index 
    this.name=name
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.navMenu{
 position: fixed;
 right: 1%;
 top:0;
 height: 100%;
 color:white;

}
.navMenu ul{
  list-style: none;
  background: #00B595;
  padding: 5%;

}
.navMenu ul li{
  margin:20% 0% 10%;
  padding: 5%;

}
.nav{

  list-style: none;
  background: #00B595;
  padding: 5%;
  margin:20% 0% 10%;
  padding: 5%;

}
.navMenu-selected{
  background: #00725E;
}
.foods-wrapper{
  background: #DBE0E3;
  position: absolute;
  top:3%;
  left:30%;
  width:60%;
  height:80%;
}
.foodList{
margin: 1%;

}
.food{
  background-color: #FFFFFF;
  border-radius: 8%;
  display: inline-block;
  height:90px;
  width:125px;
  margin: 1%;
}
.order{
  background: white;
  width: 25%;
  margin-top:1%;

}
.order-head{
  background-color: #00B595;
  width: 100%;
  height: 50px;
  margin-top:5%;

}
.border{
  border:1px solid #DBE0E3;
  margin-top: 2%;
}
.order-list{
  margin-top:1%;
  width:100%;
  height: 400px;
  background-color: yellow;
}
</style>