使用vue和JavaScript以及css写一个价格为1999的手机，使用for循环手机的的4个版本，每个版本的价格分别是299,399,499,599，当选择其中一个版本是计算价格，价格等于手机价格加上选择的版本价格

好的，我可以为您编写一个Vue组件，用于展示价格为1999的手机和其四种版本，并且可以通过选择版本来计算价格。以下是代码：

<template>
  <div class="phone-container">
    <h2>{{ price }}元手机</h2>
    <ul>
      <li v-for="(version, index) in versions" :key="index" @click="selectVersion(index)">
        {{ version }} - {{ versionPrice[index] }}元
      </li>
    </ul>
    <div v-if="selectedVersion !== null">
      <p>您选择了{{ versions[selectedVersion] }}</p>
      <p>总价为{{ totalPrice }}元</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 1999,
      versions: ["8GB+128GB", "8GB+256GB", "12GB+128GB", "8GB+128GB"],
      versionPrice: [299, 399, 499, 599],
      selectedVersion: null
    };
  },
  computed: {
    totalPrice() {
      if (this.selectedVersion !== null) {
        return this.price + this.versionPrice[this.selectedVersion];
      } else {
        return this.price;
      }
    }
  },
  methods: {
    selectVersion(index) {
      this.selectedVersion = index;
    }
  }
};
</script>

<style>
.phone-container {
  border: 1px solid #ccc;
  padding: 10px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 5px;
  cursor: pointer;
}

li:hover {
  color: #0078d7;
}
</style>

您可以将此组件添加到您的Vue应用程序中，以在页面上显示该手机及其四种版本，并且可以通过选择版本来计算价格。