用vue做一个简单的页面
时间: 2024-01-21 11:04:04 浏览: 31
好的,下面是一个简单的 Vue 页面示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Vue Page</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<ul>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
<input v-model="inputValue" placeholder="Add new item" />
<button @click="addItem">Add</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!",
list: ["Item 1", "Item 2", "Item 3"],
inputValue: ""
},
methods: {
addItem: function() {
if (this.inputValue) {
this.list.push(this.inputValue);
this.inputValue = "";
}
}
}
});
</script>
</body>
</html>
```
这个页面展示了一个包含消息、列表和添加新项目的简单 Vue 应用程序。其中:
- `{{ message }}` 使用 Vue 的双括号语法来显示 `message` 数据。
- `v-for` 指令用于在 `list` 数组上循环,并显示每个项目。
- `v-model` 指令用于将输入框的值绑定到 `inputValue` 数据上。
- `@click` 监听器用于在按钮点击时调用 `addItem` 方法,将新项目添加到列表中。
你可以将这个代码复制到一个 HTML 文件中并在浏览器中打开,就可以看到一个简单的 Vue 页面了。
相关推荐
![html](https://img-home.csdnimg.cn/images/20210720083451.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)