vue:利用index制作网页,index的代码
时间: 2024-02-24 13:57:14 浏览: 28
这是一个简单的 Vue.js index.html 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js Index</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<p v-for="(item, index) in list" :key="index">{{ index + 1 }}. {{ item }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
list: ['Item 1', 'Item 2', 'Item 3']
}
});
</script>
</body>
</html>
```
这个页面包含一个 Vue 实例,它有一个数据对象,在这个数据对象中包含了 `message` 和 `list` 两个属性。`message` 的值将会显示在页面中的 `h1` 标签中,而 `list` 中的每一项将通过 `v-for` 指令循环渲染到页面中。在 `v-for` 中,我们使用了 `index` 变量来获取当前遍历的索引值,然后通过 `{{ index + 1 }}` 显示出来。注意,我们使用了 `:key="index"` 来为每个列表项指定一个唯一的 key 值,这样可以提高列表渲染的性能。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)