vue的v-for循环指令

最新推荐文章于 2024-07-18 18:59:22 发布

dongsdh

最新推荐文章于 2024-07-18 18:59:22 发布

阅读量2.9k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/dongsdh/article/details/79866316

版权

Vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<script src="js/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="container">
			<!-- 将myList中的元素 显示在一个无序列表中-->
			<ul>
				<li>{{myList[0]}}</li>
				<li>{{myList[1]}}</li>
				<li>{{myList[2]}}</li>
				<li>{{myList[3]}}</li>
				<li>{{myList[4]}}</li>
			</ul>
			<!-- Vue提供了一个循环的指令： v-for -->
			<ol type="a">
				<li v-for="tmp in myList">
					{{tmp}}
				</li>
			</ol>
			<!-- v-for第二种语法：可以取到临时变量对应的index-->
			<p v-for="(value,key) in car">
				{{"key is "+key+" value is "+value}}
			</p>

			<p v-for="(value,key) in  myList">
				{{"key is "+key+" value is "+value}}
			</p>
		</div>
		<script>
			new Vue({
				el: '#container',
				data: {
					myList: [100, 200, 300, 400, 500],
					car: {
						brand: 'WEY',
						price: 20
					}
				}
			})
		</script>
	</body>
</html>

dongsdh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的v-for循环指令

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="js/vue.js"&gt;&lt;/script&gt; &lt;title&gt;&lt;/title&a
复制链接

扫一扫

专栏目录