vue中条件渲染

<script>
export default {
  data() {
    return {
      age: 5,
      sex:'man'
    }
  }
}
</script>
<template>
  <div>
    <!-- v-if 条件性的渲染一块内容，表达式为真时才会渲染 -->
    <p v-if="age <= 18">我是未成年人</p>
    <!-- v-else-if必须跟在v-if或者v-else-if后 -->
    <p v-else-if="age <= 50">我是成年人</p>
    <!-- v-else必须跟在v-if或者v-else-if后 -->
    <p v-else>我是老年人</p>

    <template v-if="age>6">
      <h1>图书</h1>
      <p>西游记</p>
      <p>水浒传</p>
      <p>三国演义</p>
    </template>
    <template v-else>
      <h1>图书</h1>
      <p>我不敢说</p>
      <p>别烦我</p>
      <p>吃掉黑暗的怪兽</p>
    </template>
  </div>
  <div>
    <!-- v-show会在dom渲染中保留该元素，近切换了css中display属性，不支持template，不能与v-else使用 -->
    <p v-show="sex=='man'">男生</p>
    <p v-show="sex=='woman'">女生</p>
    <!-- v-show：适用于频繁切换 -->
    <!-- v-if：控制元素的创建与销毁 运行时绑定条件很少改变 -->
    
  </div>
</template>