使用vue和JavaScript以及css，手机标价为1999元，使用 element 按钮，通过for循环手机的名字，版本，版本价格，颜色，颜色价格，手机的版本，版本价格为数组1；颜色，颜色价格为数组2；当选择手机版本时，计算总价格，价格的计算方法为手机价格加上选择的版本价格加上选择的颜色

好的，你的问题是如何使用vue、JavaScript和css来实现一个价格计算器，是吗？那么让我来解答你的问题吧！

首先，我们需要使用Vue来构建一个组件，用于显示手机的信息和价格计算器。这个组件可以包含一个下拉框，用于选择手机版本和颜色，以及一个按钮，用于计算总价格。

在组件的data属性中，我们需要定义一些变量，用于存储手机的信息和价格。可以使用一个数组来存储多种手机的信息和价格，每个手机包含名称、版本、颜色、价格等属性。

接下来，我们需要使用Vue的计算属性来计算总价格。我们可以把选中的版本和颜色作为参数传递给计算属性，然后根据选择的版本和颜色来计算总价格。

最后，我们需要使用element的组件来实现下拉框和按钮。可以使用el-select组件来实现下拉框，el-button组件来实现按钮。

下面是一个示例代码，希望能够帮助你解决问题：

<template>
  <div>
    <el-select v-model="selectedVersion" placeholder="请选择版本">
      <el-option v-for="version in versions" :key="version.id" :label="version.name" :value="version.price"></el-option>
    </el-select>
    <el-select v-model="selectedColor" placeholder="请选择颜色">
      <el-option v-for="color in colors" :key="color.id" :label="color.name" :value="color.price"></el-option>
    </el-select>
    <el-button type="primary" @click="calculatePrice">计算价格</el-button>
    <p>手机名称：{{ selectedPhone.name }}</p>
    <p>手机价格：{{ selectedPhone.price }}</p>
    <p>选择的版本：{{ selectedVersion }}</p>
    <p>选择的颜色：{{ selectedColor }}</p>
    <p>总价格：{{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phones: [
        {
          id: 1,
          name: '手机1',
          versions: [
            { id: 1, name: '版本1', price: 100 },
            { id: 2, name: '版本2', price: 200 },
          ],
          colors: [
            { id: 1, name: '颜色1', price: 50 },
            { id: 2, name: '颜色2', price: 100 },
          ],
          price: 1999,
        },
        {
          id: 2,
          name: '手机2',
          versions: [
            { id: 1, name: '版本1', price: 150 },
            { id: 2, name: '版本2', price: 250 },
          ],
          colors: [
            { id: 1, name: '颜色1', price: 70 },
            { id: 2, name: '颜色2', price: 120 },
          ],
          price: 2999,
        },
      ],
      versions: [],
      colors: [],
      selectedPhone: {},
      selectedVersion: 0,
      selectedColor: 0,
    };
  },
  mounted() {
    this.selectedPhone = this.phones[0];
    this.versions = this.selectedPhone.versions;
    this.colors = this.selectedPhone.colors;
  },
  methods: {
    calculatePrice() {
      this.totalPrice = this.selectedPhone.price + this.selectedVersion + this.selectedColor;
    },
  },
  computed: {
    totalPrice() {
      return this.selectedPhone.price + this.selectedVersion + this.selectedColor;
    },
  },
  watch: {
    selectedPhone(val) {
      this.versions = val.versions;
      this.colors = val.colors;
      this.selectedVersion = 0;
      this.selectedColor = 0;
      this.totalPrice = 0;
    },
  },
};
</script>

在这个示例代码中，我们首先定义了一个phones数组，用于存储多种手机的信息和价格。每个手机包含名称、版本、颜色、价格等属性。

在组件的data属性中，我们定义了一些变量，用于存储手机的信息和价格。我们使用selectedPhone变量来存储当前选中的手机，使用versions和colors变量来存储当前手机的版本和颜色。

在mounted方法中，我们将selectedPhone设置为phones数组中的第一个元素，并将versions和colors设置为selectedPhone的版本和颜色。

在计算属性中，我们使用selectedVersion和selectedColor来计算总价格。

在watch属性中，我们监听selectedPhone变量的变化，当selectedPhone变量发生变化时，我们更新versions和colors变量，并将selectedVersion和selectedColor设置为0，以及将totalPrice设置为0。

最后，在el-select组件中，我们使用v-for指令来循环显示手机的版本和颜色，使用:selected属性来绑定选择的值。

希望这个示例代码能够帮助你解决问题。