Vue之循环语句

最新推荐文章于 2025-04-04 06:13:00 发布

原创最新推荐文章于 2025-04-04 06:13:00 发布 · 408 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue循环语句

vue学习笔记专栏收录该内容

4 篇文章

订阅专栏

Vue的循环主要是

v-for="hero in heros"
v-for="hero,index in heros" 类似于heros[index]=hero这样子循环
v-for="i in 10" 最基本的，i=0 i++

<!DOCTYPE html>
<html>
	<head>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- vue对象里id绑定的div不能与实际操作是一个div -->
		<div id="div2">
			<div v-for="i in 10">{{i}}</div>
		</div>
		<div id="div1">
			<table border="1">
				<tr>
					<th>number</th>
					<th>name</th>
					<th>hp</th>
				</tr>
				<!-- <tr v-for="hero in heros"> -->
				<tr v-for="hero,index in heros">
					<td>
						{{index+1}}
					</td>
					<td>
						{{hero.name}}
					</td>
					<td>
						{{hero.hp}}
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
<script>
  
var data = [
          {name:"盖伦",hp:341},
          {name:"提莫",hp:225},
          {name:"安妮",hp:427},
          {name:"死歌",hp:893}
    ];
new Vue({
      el: '#div1',
      data: {
          heros:data
      }
    })
new Vue({
	el:'#div2'
})
</script>