vue實現(xiàn)餓了么點擊加入購物車區(qū)域的效果

如何實現(xiàn)點擊白色區(qū)域的菜譜然后黃色區(qū)域出現(xiàn)類似菜單的效果

<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>

回答

編輯回答

晚風(fēng)眠

非常簡單
1 你只是單純前端實現(xiàn) 也就是個demo 可以點擊獲取元素然后把元素追加到左邊購物車中,然后顯示

2 項目前后端配合點擊把數(shù)據(jù)傳給后臺然后后端接受處理,把元素歸結(jié)到未結(jié)算的購物車中,然后你調(diào)取
購物車欄目,把這個物品展示出來

點擊追加數(shù)據(jù)肯定你的變化

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>test</title>  
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>  
</head>  
<body>  
    <div id="app">
        <div @click="handleClick($event)" v-text="vlaue"></div>
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data(){
            return{
                vlaue:'123456',
                arr:[]
            }
        },
        methods:{
            handleClick(){
               this.arr.push(this.vlaue)
            }
        },
    })
</script>
</body>  
</html>

2018年3月11日 17:23