Vue 3 - 06 循环语句

Vue 3 循环语句

v-for 指令

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
		<ul>
		    <li v-for="(v, k) in sites">
		     {{ k}} - {{ v.name }}
		    </li>
		</ul>
	</div>
</body>
<script>
	const app = {
		data(){
			return {
				sites:[
					{name: "菜单1"},
					{name: "菜单2"},
					{name: "菜单3"}
				]
			}
		}
	}
	Vue.createApp(app).mount("#app");
</script>
</html>

v-for 迭代整数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
		<ul>
		    <li v-for="n in 10">
		     {{ n}}
		    </li>
		</ul>
	</div>
</body>
<script>
	const app = {
		data(){
			return {
			}
		}
	}
	Vue.createApp(app).mount("#app");
</script>
</html>

显示过滤/排序后的结果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
		<ul>
		    <li v-for="n in evenNumbers">{{n}}</li>
		</ul>
	</div>
</body>
<script>
	const app = {
		data(){
			return {
				numbers: [1,2,3,4,5]
			}
		},
		computed:{
			evenNumbers(){
				return this.numbers.filter(number => number % 2 == 0);
			}
		}
	}
	Vue.createApp(app).mount("#app");
</script>
</html>
凡所有相,皆是虚妄。

推荐阅读