Vue中v-for使用方法

最新推荐文章于 2024-09-17 00:19:36 发布

小仓桑

最新推荐文章于 2024-09-17 00:19:36 发布

阅读量2k

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_43462019/article/details/105221958

版权

VUE 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-on:mouseover</title>
		<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in c">{{item}}={{index}}</li>
			</ul>
			<ul>
				<li v-for="(key,value) in product">{{key}}={{value}}</li>
			</ul>
			<table border="1">
				<tr>
					<td>序号</td>
					<td>编号</td>
					<td>名称</td>
					<td>价格</td>
				</tr>
				<tr v-for="(product,index) in products">
				<td>{{index+1}}</td>
				<td>{{product.id}}</td>
				<td>{{product.name}}</td>
				<td>{{product.price}}</td>
			</tr>
			</table>
		</div>
	</body>
	<script type="application/javascript">
		new Vue({
			el:"#app",
			data:{
				c:[1,2,3,4,5],
				product:{
					id:1,
					name:"笔记本电脑",
					price:5000
				},
				products:[
				{id:1,name:"笔记本电脑",price:5000},
				{id:2,name:"手机",price:3000},
				{id:3,name:"mp3",price:300}
				]
			},
			methods:{
				
			}
		})
	</script>
</html>

效果图：