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>