Vue官网学习（条件渲染 v-if指令）

最新推荐文章于 2024-04-14 10:00:00 发布

CoderOu

最新推荐文章于 2024-04-14 10:00:00 发布

阅读量411

点赞数

分类专栏： Vue JS ES6 文章标签： vue js

本文链接：https://blog.csdn.net/qq_42154259/article/details/106996397

版权

Vue 同时被 3 个专栏收录

13 篇文章 1 订阅

订阅专栏

13 篇文章 0 订阅

订阅专栏

ES6

13 篇文章 0 订阅

订阅专栏

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

也就是返回v-if的值返回true的时候，这个dom元素会被渲染出来，并且显示，如果返回false，那么这个dom元素将不存在。
他与v-if的区别就是dom元素是否存在

<div v-if="true">我是内容</div>

也可以用 v-else 添加一个“else 块”：

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

在 <template> 元素上使用 v-if 条件渲染分组:
举个栗子：

<h3>我是标题<h3>
<p>我是内容</p>

如果我想通过执行来使上面这段隐藏或者显示。
做法一：在h3和p上面都加上v-if指令**（不可取）**
做法二：在h3和p外层包裹一层div（可行，有时会变形）
做法三：在h3和p外层包裹一层template标签，（可行，他在渲染的时候，template不会被渲染出来，他就相当于一个括号）

<template v-if="isShow">
	<h3>我是标题<h3>
	<p>我是内容</p>
</template>

v-else-if指令：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

key 管理可复用的元素
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。不过这里也会导致一些小问题：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button @click="changeMethod">切换方式</button>
			<template v-if="loginType == 'username'">
			  <label>账号</label>
			  <input placeholder="请输入账号">
			</template>
			<template v-else>
			  <label>手机号</label>
			  <input placeholder="请输入手机号">
			</template>
		</div>
	</body>
	<script src="../js/vue.min.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				loginType: 'username'
			},
			methods: {
				changeMethod(){
					this.loginType = this.loginType == 'username' ? '' : 'username'
				}
			}
		});
	</script>
</html>

当我们像请输入账号的输入框输入内容的时候，然后切换至输入手机号，会输入框的值没有清空，也就是vue没有重新渲染出新的input元素。复用的是原来的，
在这里插入图片描述

如果想要给每一个元素都有自己的input，那么就需要给他加入key

		<div id="app">
			<button @click="changeMethod">切换方式</button>
			<template v-if="loginType == 'username'">
			  <label>账号</label>
			  <input placeholder="请输入账号" key="username">
			</template>
			<template v-else>
			  <label>手机号</label>
			  <input placeholder="请输入手机号" key="phone">
			</template>
		</div>

这样在渲染的时候Vue就只会复用key相同的元素了。

CoderOu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue官网学习（条件渲染 v-if指令）

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。也就是返回v-if的值返回true的时候，这个dom元素会被渲染出来，并且显示，如果返回false，那么这个dom元素将不存在。他与v-if的区别就是dom元素是否存在<div v-if="true">我是内容</div>也可以用 v-else 添加一个“else 块”：<h1 v-if="awesome">Vue is awesome!</h1>.
复制链接

扫一扫