Vue学习笔记3.7 v-if v-show v-if-else

今天学习了 Vue的条件渲染

1. v-if

<div v-if="content">helloworld</div>


<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data: {
			content: true
		}
	})
</script>

当content 为false的时候  该div会从浏览器上抹去

2.v-show:

		<div v-show="content">
			Hello World
		</div>

当content为false

所以 在需要频繁切换的时候 建议用v-show 否则用v-if

3.v-if v-else-if v-else

		<div v-if="content === 'a'">
			This is A
		</div>
		<div v-else-if="content === 'b'">
			This is B
		</div>
		<div v-else>
			This is Others
		</div>


<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data: {
			content: 'a'
	})
</script>

这里要注意  v-if v-else-if v-else 这3个标签之间不能再插入其他标签 不然会报错

 

在使用v-if的时候有出现这么一个情况:

在用户名所属的那个input输入数据后。切换成邮箱之后。会吧数据一起连带过去。因为Vue有数据代码复用的机制,根据上下文检查代码能不能复用

		<div v-if="content">
			用户名:<input />
		</div>
		<div v-else>
			邮箱:<input />
		</div>

当 content = false的时候:

input中的数据会被一起带过来。那这时候如果不希望数据被一起带过来的话就这么写

给input加入key值 使其成为唯一。这样Vue就不会复用其代码了

		<div v-if="content">
			用户名:<input  key='username'/>
		</div>
		<div v-else>
			邮箱:<input  key='username'/>
		</div>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@凌晨三点半

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值