一、写在前面
今天字节一面,问了一个问题,关于vue的v-if和v-else之间的区别,此时我比巴拉巴拉说了一会,接着面试官又问道什么时候必须使用v-if,我实在不知道,下面我将彻底对v-if
和v-else
进行总结。
二、具体v-if
的值为布尔值,当为true
的时候,是渲染到dom中的,当不为true的时候,在页面中完全不渲染。v-show
的值也是布尔值,也渲染到页面中的,类似于css
中的display: false
。存在一些场景必须要使用v-if,也存在一些场景v-show。
下面我来总结一下哪种情况必须使用v-if:
我们现在想一个场景,就是当我们使用循环组件的时候,如下所示:
<template>
<div :class="[!notFirst && 'tree']">
<Tree v-if="length > 0" :length="length-1" :notFirst="true"/>
<Tree v-if="length > 0" :length="length-1" :notFirst="true"/>
</div>
</template>
<script>
export default {
name: "Tree",
props: ["length", "notFirst"]
};
</script>
此时如果我们使用v-show来进行渲染的时候,此时就会进行渲染,只是不展示而已,
此时会导致一个情况栈溢出。所以不能使用v-show,必须使用v-if。
v-show使用场景:
我们此时想一个场景,如果我们想要在vue中使用一个隐藏表单,当提交的时候,最常见的就是我们在处理csrf
攻击的时候,此时存在一种解决办法就是使用token,在前端使用一个隐藏表单域,当提交的时候,携带者该表单
的内容,此时就需要使用v-show,并且v-if是不行的,因为我希望这个表单存在,只是用户看不见,而不是表单
隐藏。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_47450807/article/details/123718470
内容来源于网络,如有侵权,请联系作者删除!