标价为1999元的手机，使用 element 按钮的形式，通过for循环手机的名字，版本，版本价格，颜色，颜色价格，手机的版本，版本价格为数组1；颜色，颜色价格为数组2；当选择手机版本时，计算总价格，价格的计算方法为手机价格加上选择的版本价格加上选择的颜色，默认选中第一个，使用Vue写

好的，让我来解答您的问题。

首先，我们需要在Vue组件中定义手机的基本信息，包括名称、价格等，并设置默认选中的版本和颜色。代码如下所示：

<template>
  <div>
    <h2>{{ phone_name }}</h2>
    <p>价格：{{ phone_price }}元</p>
    <p>版本：</p>
    <ul>
      <li v-for="(price, version) in versions" :key="version">
        <input type="radio" name="version" :value="version" v-model="selected_version" @change="calculateTotalPrice">
        <label>{{ version }} - {{ price }}元</label>
      </li>
    </ul>
    <p>颜色：</p>
    <ul>
      <li v-for="(price, color) in colors" :key="color">
        <input type="radio" name="color" :value="color" v-model="selected_color" @change="calculateTotalPrice">
        <label>{{ color }} - {{ price }}元</label>
      </li>
    </ul>
    <p>总价：{{ total_price }}元</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone_name: "手机",
      phone_price: 1999,
      versions: {
        "版本1": 100,
        "版本2": 200,
        "版本3": 300
      },
      colors: {
        "颜色1": 50,
        "颜色2": 100,
        "颜色3": 150
      },
      selected_version: "版本1",
      selected_color: "颜色1",
      total_price: 0
    };
  },
  methods: {
    calculateTotalPrice() {
      const version_price = this.versions[this.selected_version];
      const color_price = this.colors[this.selected_color];
      this.total_price = this.phone_price + version_price + color_price;
    }
  },
  mounted() {
    this.calculateTotalPrice();
  }
};
</script>

在上述代码中，我们使用了Vue的双向数据绑定功能，将用户选择的版本和颜色信息存储到`selected_version`和`selected_color`变量中，并在用户选择版本和颜色时触发`calculateTotalPrice`方法，计算手机的总价格，并将其存储到`total_price`变量中。同时，我们还在组件挂载完成后，调用了`calculateTotalPrice`方法，以便在页面加载时就能显示默认的手机总价格。

以上就是使用Vue实现您要求的功能所需要的完整代码。请注意，由于您并没有具体说明element按钮的使用方式，因此我在代码中使用了radio按钮来实现选择版本和颜色的功能。如有需要，您可以根据自己的实际情况进行修改。