Vue - 条件渲染

清疚 2021-07-25 17:13 591阅读 0赞

### Vue 中条件渲染 ###

*  一. v-if 和 v-show
 *  二. v-if 和 v-else
 *  三. v-if、v-else-if 和 v-else
 *  四. 条件渲染，key 值的使用

# 一. v-if 和 v-show #

*  `v-if` ：当 `isShow` 为 `false` 时，内容不存在Dom中，内容是不存在的，
 *  `v-show` ：当 `isShow` 为 `false` 时，内容存在Dom中，是存在的，只是内容被设置 `display:none`
 *  当频繁进行展示与隐藏的时候，推荐使用 `v-show`

<template>
      <div class="wrap">
        <div v-if="isShow">Helllo World</div>
        <div v-show="isShow">Helllo World</div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isShow: true
        };
      }
    };
    </script>
    
    <style scoped>
    </style>

# 二. v-if 和 v-else #

*  `v-if` 和 `v-else` 要连在一起使用，中间不能有Dom进行分隔

<template>
      <div class="wrap">
        <div v-if="isShow">Helllo World</div>
        <div v-else>Helllo</div>
      </div>	
    </template>
    
    <script>
    export default {
      data() {
        return {
          isShow: true
        };
      }
    };
    </script>
    
    <style scoped>
    </style>

# 三. v-if、v-else-if 和 v-else #

*  `v-if`、 `v-else-if` 和 `v-else` 要连在一起使用，中间不能有Dom进行分隔

<template>
      <div class="wrap">
        <div v-if="show == 'a'">this is A</div>
        <div v-else-if="show == 'b'">this is B</div>
        <div v-else>this is C</div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          show: "a",
        };
      },
    };
    </script>
    
    <style scoped>
    </style>

# 四. 条件渲染，key 值的使用 #

*  **原因**：Vue在重新渲染页面的时候会尽量的尝试复用已经存在的Dom，如果页面进行重新渲染页面时候发现Dom已经存在，就不会去使用最新的Dom
 *  **处理方案**：使用key值，设置dom唯一

<template>
      <div class="wrap">
        <div v-if="isShow">
          用户：
          <input type="text" key="username" />
        </div>
        <div v-else>
          邮箱：
          <input type="text" key="email" />
        </div>
        <button @click="update">改变</button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isShow: true,
        };
      },
      methods: {
        update() {
          this.isShow = false;
        },
      },
    };
    </script>
    
    <style scoped>
    </style>