使用vue和JavaScript以及css写一个价格为1999的手机,使用for循环手机的的版本为8GB+128GB,8GB+256GB,12GB+128GB,8GB+128GB,
时间: 2024-03-07 22:49:40 浏览: 39
基于Html+JavaScript+Vue+CSS的天气应用设计源码
好的,我可以为您编写一个简单的Vue组件,用于展示价格为1999的手机和其四种版本。以下是代码:
```html
<template>
<div class="phone-container">
<h2>{{ price }}元手机</h2>
<ul>
<li v-for="(version, index) in versions" :key="index">
{{ version }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
price: 1999,
versions: ["8GB+128GB", "8GB+256GB", "12GB+128GB", "8GB+128GB"]
};
}
};
</script>
<style>
.phone-container {
border: 1px solid #ccc;
padding: 10px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 5px;
}
</style>
```
您可以将此组件添加到您的Vue应用程序中,以在页面上显示该手机及其四种版本。
阅读全文