五、Vue 中的条件渲染

一、Vue 中的if 系类知道格式就行了,用法和Java等一样

  1. v-if
  2. v-if v-else
  3. v-if v-else-if v-else
    <div v-if=""></div>
    <div v-else-if=""></div>
    <div v-else=""></div>
    

二、Vue中的 show

v-show=false

说明一下 v-if 和 v-show 的区别

	必须连在一起使用:
		<div v-if=""></div>
		<div v-else-if=""></div>
		<div v-else=""></div>

三、input 添加 key值 用来做区别

在使用 组件时候,给组件添加一个 key 可以实现相同组件间的区别,所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key 属性即可:

四、v-if VS v-show

v-if=false 时不会被渲染 document 上不存在该节点,页面上不存在
v-show=false 页面会别渲染,document 上存在该节点,但是display 设置为 none 
v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,
则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 中的条件渲染</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
	<!-- 
		说明一下 v-if 和 v-show 的区别 
			v-if=false 时不会被渲染 document 上不存在该节点,页面上不存在
			v-show=false 页面会别渲染,document 上存在该节点,但是display 设置为 none 
	
		必须连在一起使用:
			<div v-if=""></div>
			<div v-else-if=""></div>
			<div v-else=""></div>

		input 添加 key值 用来做区别
	-->
	<div id="app">
		<div v-if="show">{{message}}</div>
		<div v-show='show'></div>

		<div v-if=""></div>
		<div v-else-if=""></div>
		<div v-else=""></div>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				show:false,
				message:'Hello World'
			}
		});
	</script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值