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

逃离我推掉我的手 2022-03-26 03:16 255阅读 0赞

今天学习了 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会从浏览器上抹去

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70][]![20190115132801200.png][]

2.v-show:

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

当content为false

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 1][]

所以 在需要频繁切换的时候 建议用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个标签之间不能再插入其他标签 不然会报错

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 2][]

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

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

![20190115133514303.png][]

当 content = false的时候：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 3][]

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190115132752708.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI=,size_16,color_FFFFFF,t_70
[20190115132801200.png]: /images/20220326/50a815781d694c16ae38c043fb9a9c4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 1]: /images/20220326/018ecb25ed68400c8c87046b7ad6e5c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 2]: /images/20220326/7a192e3c78e24220a8c5c83e117a6597.png
[20190115133514303.png]: /images/20220326/7177bebb154a4b4992060b5d975f30f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 3]: /images/20220326/3543cb9b7a1244c2a50a5285e25a8aa7.png