VUE3.x（v-for）循环遍历指令

Posted 2021-09-05 月疯

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE3.x（v-for）循环遍历指令相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		，<div id="app">
			<ul>
				<!-- 循环数组 -->
				<!-- <li v-for="item in arr">{{ item }}</li> -->
				<!-- 获取索引 -->
				<!-- <li v-for="(item,index) in arr">{{ index }} = {{ item }}</li> -->
			    <!-- 循环对象 -->
				<!-- 属性取值 -->
				<!-- <li v-for="item in user">{{ item }}</li> -->
				<!-- 属性的名称 -->
				<!-- <li v-for="(value,key) in user">{{ key }} = {{ value }}</li> -->
			    <!-- 属性序号的索引 -->
				<!-- <li v-for="(value,key,index) in user">{{ index+1 }} = {{ key }} = {{ value }}</li> -->
			    <!-- 循环数字 -->
				<!-- <li v-for="item in num">{{ item }}</li> -->
				<!-- 字符串循环 -->
				<!-- li的唯一标识,可以为每一项提供唯一的标识的一个节点 -->
				<!-- <li v-for="item in str" :key="">{{ item }}</li> -->
				<li v-for="(item,index) in str" :key="index">{{ index }} = {{ item }}</li>
			</ul>
			
		</div>
		<script>
			Vue.createApp({
				data(){
					return {
						arr:['tom','jack','alice','mike'],
						user:{
							id:9527,
							name:"唐伯虎",
							age:25
						},
						num:5,
						str:'hello'
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>

以上是关于VUE3.x（v-for）循环遍历指令的主要内容，如果未能解决你的问题，请参考以下文章