Vue3--vue条件渲染v-if/v-show

vue的条件渲染v-if/v-show

Vue提供了下面的指令来进行条件判断
v-if
v-else
v-else-if
v-show

一.v-if

基础使用

v-if、v-else、v-else-if用于根据条件来渲染某一块的内容
这些内容只有在条件为true时，才会被渲染出来
这三个指令与JavaScript的条件语句if、else、else if类似

    <div id="app">
      <h1 v-if="score > 90">优秀h1>
      <h2 v-else-if="score > 80">良好h2>
      <h3 v-else-if="score >= 60">及格h3>
      <h4 v-else>不及格h4>
    div>

v-if的渲染原理

v-if是惰性的；
当条件为false时，其判断的内容完全不会被渲染或者会被销毁掉；
当条件为true时，才会真正渲染条件块中的内容；

template元素

因为v-if是一个指令，所以必须将其添加到一个元素上
但是如果我们希望切换的是多个元素呢？
此时我们渲染div，但是我们并不希望div这种元素被渲染；
这个时候，我们可以选择使用template；

	<template v-if="Object.keys(info).length">
        <h2>个人信息h2>
        <ul>
          <li>姓名:{{info.name}}li>
          <li>年龄:{{info.age}}li>
        ul>
    template>
    <template v-else>
      <h2>没有输入个人信息h2>
      <p>请输入个人信息后 再进行展示p>
    template>

template元素可以当做不可见的包裹元素，并且在v-if上使用，但是最终template不会被渲染出来 有点类似于小程序中的block

v-show

基础用法

v-show和v-if的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件

	<div v-show="isShowCode">
		<img src="...." alt=""/>
	<div>

v-if/v-show区别

1.用法上

v-show是不支持template；
v-show不可以和v-else一起使用；

2.本质的区别

v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换；
v-if当条件为false时，其对应的原生压根不会被渲染到DOM中；

3.开发中如何进行选择

如果我们的原生需要在显示和隐藏之间频繁的切换，那么使用v-show；
如果不会频繁的发生切换，那么使用v-if；