Vue中条件判断v-if与v-show

Ednburgh-

已于 2022-08-02 19:20:24 修改

阅读量3.6k

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-08-02 18:28:48 首次发布

本文链接：https://blog.csdn.net/m0_71345904/article/details/126127588

版权

3，v-if与v-show的区别和使用场景

1.1定义：

v-if用于条件判断，来判断Dom元素是否显示。

1.2用法：

（1），单独使用v-if，变量为布尔值，为true才渲染Dom。false不渲染Dom。

（2），可以将变量写成能转换为布尔值的表达式。

（3），v-if、v-else、v-else-if联合使用相当于if、elseif、else，但是在条件比较多的时候建议使用计算属性。

1.3案例代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2 v-if="isFlag">我们是勇于战斗的</h2>
			
			
			<h3 v-if="age<18&#

最低0.47元/天解锁文章

Ednburgh-

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中条件判断v-if与v-show

1），v-if显示与隐藏元素是通过删除和添加节点来完成的，v-show是通过对节点进行display：none/block操作，并没有删除节点。（3），v-if、v-else、v-else-if联合使用相当于if、elseif、else，但是在条件比较多的时候建议使用计算属性。（2），v-if，v-else-if，else，配合使用，一旦符合条件，不执行其他的条件。（1）v-if渲染DOM，为false时移除显示，是比较强硬的手段，直接将节点删除。（2）false时，隐藏元素，实际还在，只是不显示。....
复制链接

扫一扫