Vue学习之条件渲染和列表渲染

最新推荐文章于 2024-08-03 21:32:51 发布

lanjingling_0825

最新推荐文章于 2024-08-03 21:32:51 发布

阅读量103

点赞数

文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/lanjingling_0825/article/details/126004958

版权

系列文章目录

第三章Vue学习之条件渲染和列表渲染

文章目录

系列文章目录
前言
一、条件渲染
二、使用步骤
- 1.v-if指令
- 2.运行程序
总结

前言

本文就介绍vue学习的基础内容。

一、条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

二、使用步骤

1.v-if指令

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
			
			<template v-if="n === 1">
				<h2>你好</h2>
				<h2>CSDN社区</h2>
				<h2>北京</h2>
			</template>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'CSDN社区',
				n:0
			}
		})
	</script>
</html>

2.运行程序

图片如下（示例）：

![在这里插入图片描述](https://img-blog.csdnimg.cn/6d820e12a9b242188f9806d5409a4207.png)

此时，当我们点击“点我n+1”时，当前的n的值会从0变成1并且会在“点我n+1”下方出现你好 CSDN社区北京的字样。
那么问题来了，为什么v-if 要和元素放在一起用呢？原来是因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含元素。