标价为1999元的手机，使用el-button，通过for循环手机的版本名字，版本价格，颜色，颜色价格；手机的版本id,版本名字，版本价格为数组1；颜色id，颜色类型，颜色价格为数组2；当选择手机版本时和颜色类型时，计算总价格。价格的计算方法为手机价格加上选择的版本价格加上选择的颜色类型，默认选中第一个,用Vue写

好的，根据您的描述，我理解您需要一个价格计算的功能，用Vue实现。以下是一个可能的实现方案：

首先，在模板中使用el-button和el-radio-group组件来显示手机的版本和颜色选项，并绑定对应的数据。同时，使用computed属性来计算出总价格。

<template>
  <div>
    <h3>手机版本</h3>
    <el-radio-group v-model="selectedVersion">
      <el-radio v-for="version in versions" :key="version.id" :label="version">
        {{ version.name }} ({{ version.price }}元)
      </el-radio>
    </el-radio-group>

    <h3>颜色</h3>
    <el-radio-group v-model="selectedColor">
      <el-radio v-for="color in colors" :key="color.id" :label="color">
        {{ color.type }} ({{ color.price }}元)
      </el-radio>
    </el-radio-group>

    <h3>总价格：{{ totalPrice }}元</h3>
  </div>
</template>

然后，在脚本中定义数据和计算属性。其中，数据包括手机版本和颜色的选项，以及当前选中的版本和颜色；计算属性则根据当前选中的版本和颜色，计算出总价格。

<script>
export default {
  data() {
    return {
      versions: [
        { id: 1, name: '版本1', price: 100 },
        { id: 2, name: '版本2', price: 200 },
        { id: 3, name: '版本3', price: 300 }
      ],
      colors: [
        { id: 1, type: '红色', price: 50 },
        { id: 2, type: '蓝色', price: 60 },
        { id: 3, type: '白色', price: 70 }
      ],
      selectedVersion: null,
      selectedColor: null
    }
  },
  computed: {
    totalPrice() {
      let price = 1999
      if (this.selectedVersion) {
        price += this.selectedVersion.price
      }
      if (this.selectedColor) {
        price += this.selectedColor.price
      }
      return price
    }
  }
}
</script>

最后，将组件注册到Vue实例中即可。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

这样，当用户选择手机版本和颜色时，总价格会自动更新。注意，这个实现方案仅供参考，具体实现可能需要根据具体需求进行调整。