vue实现简易购物车

<template>
  <div>
     <!-- 这是自己写的  类似于购物车 的 选购 小demo  -->
    <div style="display: flex">
      <div style="margin: auto">
        <el-radio-group v-model="radio1" @change="getConfigPrice()">
          <el-radio-button :label="version[0].price">
            {{ version[0].isVersion }}
          </el-radio-button>
          <el-radio-button :label="version[1].price">
            {{ version[1].isVersion }}
          </el-radio-button>
          <el-radio-button :label="version[2].price">
            {{ version[2].isVersion }}
          </el-radio-button>
        </el-radio-group>

        <div style="margin: 100px 0 0 30px">
          <el-input-number
            v-model="couterNum"
            @change="handleChange"
            :min="0"
            :max="2000"
            :step="100"
            label="描述文字"
          ></el-input-number>
        </div>

        <div style="margin: 30px 0 0 30px">总价 ： {{ finalTotalPrice  }}</div>
        <div style="margin-top: 300px">
          <h1>月份</h1>
          <el-slider
            :step="1"
            :max="13"
            @change="getSliderValue()"
            v-model="value2"
            show-stops
          >
          </el-slider>
        </div>


      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      version: [
        {
          id: 1,
          isVersion: "基础版",
          processor: "2核心处理器",
          Memory: "4g内存",
          price: 60,
        },
        {
          id: 2,
          isVersion: "标准版",
          processor: "4核心处理器",
          Memory: "8g内存",
          price: 93,
        },
        {
          id: 3,
          isVersion: "尊贵版",
          processor: "8核心处理器",
          Memory: "16g内存",
          price: 158,
        },
      ],
      radio1: 60, // 基础配置的值
      value2: 0, // 滑块的值 （也就是月份）
      couterNum: 0, // 计数器的值
    };
  },
  created(){
    this.getConfigPrice()
  },
  methods: {
    // 获取各项配置价格
    getConfigPrice() {
      console.log(this.radio1, "这是基本配置的价格");
    },
    // 滑块的指
    getSliderValue() {
      console.log(this.value2, "这是滑块的值，月份");
    },
    // 计数器的值
    handleChange(value) {
      console.log(value, "这是计数器的值得");
    },
  },
  computed: {
    //  最终 总价 = 版本价格 + 内存价格(100 gb是 16元) * 月数
    finalTotalPrice() {
      return (this.radio1 + this.couterNum * 0.16) * (this.value2 + 1);
    },
  },

  

};
</script>

<style>
</style>```