帮我写一个基于vue2的页面
时间: 2023-05-23 21:05:51 浏览: 51
A:好的,以下是一个简单的基于vue2的页面示例:
```
<template>
<div class="app-container">
<h1>{{ message }}</h1>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
<input v-model="inputValue" type="text">
<button @click="addItem()">Add Item</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "Welcome to the Vue2 app!",
inputValue: "",
items: [
{ id: 1, name: "Item 1" },
{ id: 2, name: "Item 2" },
{ id: 3, name: "Item 3" }
]
};
},
methods: {
addItem() {
const newItem = { id: this.items.length + 1, name: this.inputValue };
this.items.push(newItem);
this.inputValue = "";
}
}
}
</script>
<style>
.app-container {
margin: auto;
max-width: 600px;
}
ul {
list-style: none;
padding-left: 0;
margin-top: 20px;
}
li {
margin-bottom: 10px;
}
input[type="text"], button {
margin-top: 20px;
}
</style>
```
这个页面包含一个简单的标题和一个列表,能够动态添加列表项。当用户输入文本并点击按钮时,将会创建一个新的列表项并显示在列表中。这个页面是响应式的,如果用户改变窗口大小,页面将会适应新的大小。