v-if或v-for

最新推荐文章于 2024-07-19 10:04:44 发布

hamimelon2020

最新推荐文章于 2024-07-19 10:04:44 发布

阅读量94

点赞数

分类专栏： JavaScript vue

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

版权

Vue.js v-for v-if 任务清单数据渲染

关键词由CSDN通过智能技术生成

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<body>
		<div id="app">
			<h1 v-if="yes">已完成的计划</h1>
			<h1>未完成的计划</h1>
		</div>
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
				data() {
					return {
						yes: true
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>

加了v-for就不对了

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

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

加了引号

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

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

对了，但是多了，怎么办呢？

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

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