vue条件渲染使用场景(v-if VS v-show)

x33g5p2x  于2022-03-24 转载在 其他  
字(0.9k)|赞(0)|评价(0)|浏览(420)

一、写在前面
今天字节一面,问了一个问题,关于vue的v-if和v-else之间的区别,此时我比巴拉巴拉说了一会,接着面试官又问道什么时候必须使用v-if,我实在不知道,下面我将彻底对v-ifv-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是不行的,因为我希望这个表单存在,只是用户看不见,而不是表单
隐藏。

相关文章