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

好的，这个问题跟你之前问的问题非常类似。下面是一个示例代码，希望能够帮助你解决问题：

<template>
  <div>
    <button @click="showPhones">显示手机</button>
    <div v-if="show">
      <h2>手机列表</h2>
      <ul>
        <li v-for="(phone, index) in phones" :key="index">
          <h3>{{ phone.name }}</h3>
          <ul>
            <li v-for="(version, versionIndex) in phone.versions" :key="versionIndex">
              {{ version.name }}：{{ version.price }}
            </li>
          </ul>
          <ul>
            <li v-for="(color, colorIndex) in phone.colors" :key="colorIndex">
              {{ color.name }}：{{ color.price }}
            </li>
          </ul>
          <label>选择版本：</label>
          <select v-model="selectedVersion">
            <option v-for="(version, versionIndex) in phone.versions" :key="versionIndex" :value="version.price">{{ version.name }}</option>
          </select>
          <label>选择颜色：</label>
          <select v-model="selectedColor">
            <option v-for="(color, colorIndex) in phone.colors" :key="colorIndex" :value="color.price">{{ color.name }}</option>
          </select>
          <button @click="calculatePrice(phone.price)">计算价格</button>
          <p>总价格：{{ totalPrice }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

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

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

在组件的data属性中，我们定义了一些变量，用于存储当前选择的版本和颜色，以及计算出来的总价格。我们使用show变量来控制是否显示手机列表。

在showPhones方法中，我们将show变量设置为true，从而显示手机列表。

在calculatePrice方法中，我们根据当前选择的版本和颜色，以及当前手机的价格，来计算总价格。

在模板中，我们使用v-if指令来控制是否显示手机列表。在手机列表中，我们使用v-for指令来循环显示手机的版本和颜色，使用v-model指令来绑定当前选择的版本和颜色。在计算价格时，我们传入当前手机的价格作为参数。

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