vue.js入门（11）条件渲染v-if

谢西顾

于 2018-05-17 13:06:26 发布

阅读量233

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yiyiyixin/article/details/80349344

vue.js 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了Vue中v-if与v-show指令的区别及应用场景。通过实例对比展示了如何使用这两种指令进行条件渲染，特别是针对互斥条件的处理方式。v-if适用于需要在多个条件中选择一个的情况，而v-show则始终保持DOM元素的存在，仅改变其可见性。

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	
</head>
<body>
<div id="vue-app">
	
	<button v-on:click="error=!error">错误</button>
	<button v-on:click="success=!success">成功</button>
	<p v-if="error">网络错误</p>
	<p v-else-if="success">网络成功</p>
	<p v-else>空</p>
	
	<!--对比-->
	<button v-on:click="error=!error">错误</button>
	<button v-on:click="success=!success">成功</button>
	<p v-show="error">网络错误</p>
	<p v-show="success">网络成功</p>
	<p v-show>空</p>
	
</div>
	<script src="app.js"></script>
</body>

//app.js

new Vue({
	el:"#vue-app",
	data:
	{	
		success:false,
		error:false
		
	},
	  
});

1.v-if

条件渲染，else-if else这样可以保证只出现一个选择

2.v-show

v-show不能保证只出现一个，而且它有一个特点，运行时，v-if控制台代码只有存在的那个值，而v-show都有，只是不显示出来