为什么p不行，template行？template究竟是个什么功能？

本文链接：https://blog.csdn.net/weixin_40945354/article/details/120083809

<!DOCTYPE html>
<html>
	<body>
		<div id="app">
			<h1>已完成的计划</h1>
			    <ul>
					<p v-for="todolist in todolists">
					<li v-if="todolist.isComplete"> {{ todolist.content }}</li>
				</p>
				</ul>
			<h1>未完成的计划</h1>
			   <ul>
				<p v-for="todolist in todolists">
				<li v-if="!todolist.isComplete"> {{ todolist.content }}</li>
			</p>
			    </ul>
		</div>
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
				data() {
					return {
						todolists: 
						[
							{content: '做饭', isComplete: true},
							{content: '买菜', isComplete: true},
							{content: '开会', isComplete: false},
							{content: '写书', isComplete: false},
							{content: '吃饼', isComplete: false},
						]
					}
				},

			}).mount('#app')
		</script>
	</body>
</html>

不能理解

template的

<!DOCTYPE html>
<html>
	<body>
		<div id="app">
			<h1>已完成的计划</h1>
			    <ul>
					<template v-for="todolist in todolists">
					<li v-if="todolist.isComplete"> {{ todolist.content }}</li>
					</template>
				</ul>
			<h1>未完成的计划</h1>
			   <ul>
				<template v-for="todolist in todolists"></p>
				<li v-if="!todolist.isComplete"> {{ todolist.content }}</li>
			</template>
			    </ul>
		</div>
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
				data() {
					return {
						todolists: 
						[
							{content: '做饭', isComplete: true},
							{content: '买菜', isComplete: true},
							{content: '开会', isComplete: false},
							{content: '写书', isComplete: false},
							{content: '吃饼', isComplete: false},
						]
					}
				},

			}).mount('#app')
		</script>
	</body>
</html>