v-if和v-show

用途

v-if和v-show用于判断这个组件是否显示，就结果而言没有区别

其中v-if会在条件为true的时候才会渲染，而v-show单纯只是不显示，会和其他组件一起渲染

如果要经常切换界面，建议使用v-show而不是v-if，但是v-if会加快页面加载的速度

使用

只需要在标签后面直接写v-if="条件"或者v-show="条件"，注意和其他属性用空格区分

• 单独变量判断

  <template>
    <div>
      <div v-if="isShow">
        Hello world!
      </div>
    </div>
  </template>
  
  <script>
    export default {
      data(){
        return{
          isShown:false
        }
      }
    }
  </script>

  注意，Hello world!并不会显示，因为变量isShown的值为false

• 条件判断

  <template>
    <div>
      <div v-if="isShow=='showIt'">
        Hello world!
      </div>
    </div>
  </template>
  
  <script>
    export default {
      data(){
        return{
          isShow:"showIt"
        }
      }
    }
  </script>

  注意，此时的Hello world!会显示，因为变量isShow的值为showIt

  注意，v-if和v-show后面的条件需要用引号，单引号或者双引号都可，但是需要注意如果设计字符串判断，需要引号混用：

  ✅v-if="isShown='showIt'"

  ❌v-if="isShown="showIt""