<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>Document</title>
</head>
<body>
<div id='app'>
<!-- v-for作用: 遍历容器 (数组和对象)动态生成标签 -->
<!--
语法
1. v-for="v in data中的容器名" v指的数组中每个元素的值
2. v-for="(v,i) in data中的容器名" v指的数组中每个元素的值 i->索引
-->
<li v-for="v in list">{{v}}</li>
---------111---------------
<li v-for="(v,i) in list">{{v}}---{{i}}</li>
---------222--------------
<li v-for="(b,a) in list">{{b}}---{{a}}</li>
</div>
<script src='./vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
list: [
"欧美",
"日韩",
"大陆"
]
},
methods: {
}
});
</script>
</body>
</html>
![](https://img2018.cnblogs.com/blog/1490002/201905/1490002-20190528202721325-1997725335.jpg)