VUE初学--条件渲染v-if、v-else、v-else-if 以及 v-if管理复用 key 学习、v-show

最新推荐文章于 2024-05-14 21:04:35 发布

前端大流中的小菜鸡

最新推荐文章于 2024-05-14 21:04:35 发布

阅读量724

点赞数 2

分类专栏： VUE 文章标签： VUE初学--v-if、v-else、v-else-if、v-show

本文链接：https://blog.csdn.net/qq_42970981/article/details/103067772

版权

本文详细介绍了Vue中的条件渲染指令v-if、v-else、v-else-if和v-show的用法。v-if用于条件性渲染，基于表达式变化影响DOM；v-else和v-else-if必须与v-if配合使用；添加key值可以避免Vue在切换条件时复用元素；v-show通过切换display样式控制元素显示，不支持template，适用于频繁切换场景。理解这些指令对于Vue开发至关重要。

摘要由CSDN通过智能技术生成

1、v-if
v-if 指令用于条件性的渲染一款内容，当表达式的只发生改变时，其产生的连带影响，响应式的作用于 DOM

	<div id="#app">
		<div v-if="seen">你看见了一个帅哥:我</div>
		// 在template标签上加 v-if 渲染结果将不包含 <template> 元素
		<template v-if="ok">
			<p>我是菜鸟</p>
            <p>好多菜鸟</p>
            <p>你是真的菜</p>
		</template>
	</div>
	var vm = new Vue({
   
		el:'#app',
		data:{
   
			seen:true, // 在控制器中输入 vm.seen = false 发现整个div会消失掉
			ok:true
		}
	})