点种类，上面的图片和价钱获取对应的值

看效果图，点种类，上面的图片和价钱都可以变，提交订单打印，价钱，种类，数量，座位号

打印一下

这个效果是如何实现的？

刚开始点进来的页面
上面显示图片，价钱是在data数据里面定义的，然后绑定到页面上
我正在思考如何让这两个数据变成从后台获取的第一个数据

之前一直想不到，这个图片和价钱是怎么渲染上去 的，我一直以为图片和价钱是去循环遍历展示的第一条数据，我就去搜怎么只输出一条数据，网上展示好几种方法，（有在计算属性里面slice截取的，有直接加个v-if让index<1的），底下的那个面条和米饭就是循环遍历输出了name，我尝试这样去输出，但是报错了，

于是我去问了师傅，他教我换了一种思路，先把图片和价钱展示成固定的，然后把他们用{{}}，在data里面定义，再去操作修改，

那么如何去修改呢？

我是在点击以后发起请求去后台拿到数据，在返回成功的数据里面，我去把后台那个数据赋值给data里面绑定的数据，这样图片和价钱就是动态的了，然后再去操作如何点击改变他们

刚进入页面我让默认选中第一个数据，把他的name值直接传到提交那个按钮

this.skuArr = res.data.data.data
this.price = res.data.data.data.skuList[0].list[0].price
 // this.foodtype = res.data.data.data.skuList[0].list[0].name
 this.goods_img = res.data.data.data.skuList[0].list[0].goods_img
 this.name = res.data.data.data.skuList[0].list[0].name

种类下面的面条和米饭是v-for循环请求的json数据显示到页面

这里的v-for一定要搞清楚v-for="(item,index) in skuArr.skuList"
item代表是数组里面的一个对象，循环输出每一个，index是索引

然后点击面条，选中，点击米饭，选中米饭面条不选中，
这里的逻辑是给li的class去绑定i
开始 i是空

:class="{orange:i === index}"

.orange {
  background-color: orange;
  color: white;
}

点击li

this.i = index // 把当前索引赋值给i

这块参考了 https://blog.csdn.net/wxz340825/article/details/85015167
查找json数据去给页面上的数据绑定，控制点击替换

this.price = item.price
this.name = item.name
this.goods_img = item.goods_img

点击提交获取页面的数值

this.seat = this.$refs.input.value // input框接收一个传过来的座位号，编辑以后获取
this.newnum = this.$refs.num.value
console.log('价钱 ' + this.price)
console.log('种类 ' + this.name)
console.log('座位号 ' + this.seat)
console.log('数量 ' + this.newnum)

json数据

"skuList":
        [{
            "name": "种类",
            "list": [{
                "price": "15",
                "name": "面条",
                "goods_img": "//img.alicdn.com/imgextra/i3/2751483692/O1CN01hiPxvJ1d8ymPJRqEc_!!2751483692.jpg_200x200Q50s50.jpg"
                
            }, {
                "price": "20",
                "name": "米饭",
                "goods_img": "//img.alicdn.com/imgextra/i3/3874929428/O1CN01E934K92JW4abw8aUg_!!3874929428.jpg_2200x2200Q50s50.jpg_.webp"
            }]
        }]

源码：

<template >
  <div class="cab-common cab-food">
    <div class="item" @click="addCart()">
      <div class="describe">
        <span class="first">机上餐食</span>
        <p class="second">Restaurant</p>
      </div>
      <div v-if="is_sku" class="specification_mask2">
        <div class="specification_com2" @click.stop="is_sku==false">

          <div class="productConten">
            <div class="product-delcom">
              <div class="header">
                <div class="img-wrap">
                  <img :src="goods_img" alt="">
                </div>
                <div class="main">
                  <div class="price-wrap">
                    <p class="">{{price}}</p>
                  </div>
                </div>
                <a class="sku-close" @click="cancelMask" aria-label="关闭">
                  <i class="iconfont icon-chahao"></i>
                </a>
              </div>
            </div>

            <div class="product-delcom" v-for="(item,index) in skuArr.skuList" :key="index">
              <p>种类</p>
              <ul class="product-footerlist clearfix">
                <li
                  v-for="(l,index) in item.list"
                  v-bind:key="index"
                  @click="specificationBtn(l,index)"
                  :class="{orange:i === index}"
                >{{l.name}}</li>
              </ul>
            </div>
          </div>

          <div type="flex" class="van-row--flex sku_specification2">
            <div class="van-col van-col--12" :span="12">购买数量</div>
            <div class="van-col van-col--12" :span="12" style="text-align: right">
              <button class="van-stepper__plus" v-on:click="decrement">-</button>
              <input type="text" class="van-stepper__input" size="1" v-model="num" ref="num">
              <button class="van-stepper__plus" @click="increment">+</button>
            </div>
          </div>
          <div type="flex" class="van-row--flex sku_specification2">
            <div class="van-col van-col--12" :span="12">您的座位号</div>
            <div class="van-col van-col--12 number" style="text-align: right">
              <input id="number" type="number" v-model="seat" ref="input">
            </div>
          </div>
          <cube-button @click="sku_addCart" :primary="true">提交订单</cube-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    seat: {
      type: String
    }
  },
  data() {
    return {
      price: null,
      goods_img: null,
      i: 0,
      skuArr: [],
      num: 1,
      is_sku: false // 规格弹窗
    }
  },
  methods: {
    increment() {
      this.num++
    },
    decrement() {
      if (this.num <= 1) {
        // alert('受不1了啦，宝贝不能再减少啦')
        this.num = 1
      } else {
        this.num--
      }
    },
    // 点餐食
    addCart() {
      this.is_sku = true
      this.axios.get('api/getgoods').then(
        res => {
          this.skuArr = res.data.data.data
          this.price = res.data.data.data.skuList[0].list[0].price
          // this.foodtype = res.data.data.data.skuList[0].list[0].name
          this.goods_img = res.data.data.data.skuList[0].list[0].goods_img
          this.name = res.data.data.data.skuList[0].list[0].name
        },
        function(err) {
          console.log(err)
        }
      )
    },
    // 点击蒙层取消
    cancelMask: function() {
      this.is_sku = false
    },
    // 选择购买的商品规格
    specificationBtn: function(item, index) {
      this.i = index // 点击选中
      this.price = item.price
      this.name = item.name
      this.goods_img = item.goods_img
      // console.log(index)
      // console.log(item.name)
    },
    // 提交订单
    sku_addCart(item) {
      this.seat = this.$refs.input.value // input框接收一个传过来的座位号，编辑以后获取
      this.newnum = this.$refs.num.value
      console.log('价钱 ' + this.price)
      console.log('种类 ' + this.name)
      console.log('座位号 ' + this.seat)
      console.log('数量 ' + this.newnum)
      this.is_sku = false
      // this.axios.get('api/getgoods', {
      //   price: this.price
      // }).then()
    }
  }
}
</script>
<style lang="stylus">
.orange {
  background-color: orange;
  color: white;
}

.productConten {
  margin-bottom: 10px;
}

.productConten p {
  text-align: left;
}

// header
.header {
  // padding: 10px 0 10px 126px;
  margin-top: 10px;
  position: relative;
  display: flex;
  border-radius 10px
  .img-wrap {
    width: 50%;
    height: 100px;
    // position: absolute;
    // top: -28px;
    // left: 10px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 1px;
    background-color: #fff;
    img {
      width 100%
    }
  }

  .main {
    width 50%
    color: #051b28;
    line-height: 18px;
    margin-top 10px
    padding-right: 20px;
    padding-left: 20px;
    .price-wrap {
      width: 210px;
      font-size: 25px;
      color orange
    }
  }

  .sku-close {
    position: absolute;
    top: -16px;
    right: -16px;
  }
}

// 种类
.product-delcom {
  padding: 10px 20px;
  color: #323232;
  font-size: 15px;
  border-bottom: 1px solid #EEEEEE;
}

.product-footerlist {
  margin-top: 10px;
}

.product-footerlist li {
  border: 1px dashed orange;
  // border-radius: 5px;
  // color: orange;
  text-align: center;
  padding: 5px 10px;
  float: left;
  margin-right: 5px;
  margin-bottom: 10px;
}

.product-footerlist li.productActive {
  background-color: orange;
  color: #fff;
  border: 1px solid orange;
}

.product-footerlist li.noneActive {
  background-color: #ccc;
  opacity: 0.4;
  color: #000;
  pointer-events: none;
}

//
.item {
  width: 100%;
  text-align: center;
}

.specification_mask2 {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.specification_com2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  border-radius:10px 10px 0px 0px
}

.van-row--flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.van-col--12 {
  width: 50%;
}

.van-col {
  float: left;
  text-align: left;
  font-size: 15px;
  line-height: 25px;
  box-sizing: border-box;
}

.van-stepper__plus {
  width: 40px;
  height: 30px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #ebedf0;
  position: relative;
  padding: 5px;
  vertical-align: middle;
}

.van-stepper__input {
  width: 33px;
  height: 26px;
  padding: 1px;
  border: 1px solid #ebedf0;
  border-width: 1px 0;
  border-radius: 0;
  box-sizing: content-box;
  color: #7d7e80;
  font-size: 15px;
  vertical-align: middle;
  text-align: center;
  -webkit-appearance: none;
}

#number {
  height: 30px;
  width: 113px;
  border-radius: 3px;
  float: right;
  border: 1px solid #ebedf0;
  text-align: center;
  font-size: 20px;
}

.choose_sku2 {
  max-height: 300px;
  overflow: scroll;
}

.sku_specification2 {
  box-sizing: border-box;
  padding: 10px 20px;
}

.sku-close {
  width: 30px;
  display: block;
  float: right;
  text-align: right;
  padding: 10px;
}

.sku_title2 {
  font-size: 15px;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: left;
}

.sku_ul2 {
  display: flex;
  flex-wrap: wrap;
}

ol, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sku_li2 {
  box-sizing: border-box;
  padding: 5px 10px;
  margin: 0 0.15rem 0.15rem 0;
  border-radius: 5px;
  font-size: 15px;
}

.productActive {
  background: #ffd100;
}
</style>