P6. vue 条件渲染 v-if, v-show

v-if 简单实例

<script>
export default {
  data() {
    return {
      age: 6
    };
  },
};

</script>


<template>
  <div>
    <p v-if="age>18"> 我是成年人</p>
    <p v-if="age<=18"> 我是未成年人</p>
  </div>
</template>

<style>

</style>

v-else

v-else-if

<script>
export default {
  data() {
    return {
      age: 18
    };
  },
};

</script>


<template>
  <div>
    <p v-if="age>18"> 我是成年人</p>
    <p v-else-if="age==18">正好成年</p>
    <p v-else> 我是未成年人</p>
  </div>
</template>

<style>

</style>

template

<script>
export default {
  data() {
    return {
      age: 18
    };
  },
};

</script>


<template>
  <div>
    <p v-if="age>18"> 我是成年人</p>
    <p v-else-if="age==18">正好成年</p>
    <p v-else> 我是未成年人</p>
    <!-- 在template 元素上使用 v-if 条件渲染分组 -->
    <template v-if="age>=18">
      <p>hello kugou</p>
      <p>hello kugou</p>
      <p>hello kugou</p>
      <p>hello kugou</p>
      <p>hello kugou</p>
      <p>hello kugou</p>
      <p>hello kugou</p>
      <p>hello kugou</p>
      <p>hello kugou</p>
    </template>

  </div>
</template>

<style>

</style>

template 是一个包裹性元素 ，不显示

v-show

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

<script>
export default {
  data() {
    return {
      age: 18,
      sex: 'nan',
      isShow: true

    };
  },
};

</script>


<template>
  <div>
    <p v-if="age>18"> 我是成年人</p>
    <p v-else-if="age==18">正好成年</p>
    <p v-else> 我是未成年人</p>
    <!-- 在template 元素上使用 v-if 条件渲染分组 -->
    <template v-if="age>=18">
      <p>hello kugou</p>
      <p>hello kugou</p>
      <p>hello kugou</p>
      <p>hello kugou</p>
      <p>hello kugou</p>
      <p>hello kugou</p>
      <p>hello kugou</p>
      <p>hello kugou</p>
      <p>hello kugou</p>
    </template>
    <!-- v-show -->
    <p v-show="sex=='nan'">男</p>
    <p v-show="sex=='nv'">女</p>

    <h2 v-if="isShow">v-if</h2>
    <h2 v-show="!isShow">v-show</h2>
    <button @click="isShow=!isShow">change isShow</button>

  </div>
</template>

<style>

</style>

v-if 只有后面为false，对应的元素以及子元素都不会渲染，控制dom元素的创建和销毁，运行时条件很少改变 ，一次性。
v-show 简单的切换河源市的 display css property，带有v-show的元素始终会被渲染保留在dom中 。