Vue - 条件渲染

一. 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>