Vue之循环语句

最新推荐文章于 2021-07-06 16:12:53 发布

zyupupup

最新推荐文章于 2021-07-06 16:12:53 发布

阅读量308

点赞数

分类专栏： vue学习笔记文章标签： Vue循环语句

本文链接：https://blog.csdn.net/zyupupup/article/details/103512460

版权

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

4 篇文章 0 订阅

订阅专栏

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>

zyupupup

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之循环语句

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.mi...
复制链接

扫一扫

专栏目录