uniapp如何实现隐藏和显示

第一段：uniapp中使用v-show指令实现显示和隐藏

在uniapp中，我们可以使用v-show指令来实现对元素的显示和隐藏。这个指令的用法和Vue中使用方法相同。v-show指令的值为一个布尔值，当值为true时元素显示，当值为false时元素隐藏。

<template>
  <div>
    <p v-show="isShowDiv">这是要显示的内容</p>   
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isShowDiv: true
      }
    }
  }
</script>

第二段：uniapp中使用v-if指令实现动态创建和删除元素

除了使用v-show指令来实现元素的显示和隐藏，我们还可以使用v-if指令来实现动态创建和删除元素。v-if指令的值同样为一个布尔值，当值为true时元素存在于DOM树中，当值为false时元素从DOM树中删除。

<template>
  <div>
    <p v-if="isShowDiv">这是要动态创建的内容</p>   
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isShowDiv: true
      }
    }
  }
</script>

第三段：uniapp中使用条件渲染指令v-if和v-else-if

在uniapp中，我们还可以使用v-else-if指令来实现条件渲染。类似于v-if指令，v-else-if和v-else指令都是基于一个条件表达式的布尔值来进行渲染的。v-else-if指令必须紧随在v-if指令之后使用，否则它不会被识别。

<template>
  <div>
    <p v-if="age < 18">这是未成年人的内容</p>   
    <p v-else-if="age >=18 && age <= 60">这是成年人的内容</p>
    <p v-else>这是老年人的内容</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        age: 30
      }
    }
  }
</script>

第四段：uniapp中使用v-for指令实现循环渲染

在uniapp中，我们可以使用v-for指令来实现循环渲染。v-for指令需要使用一个数组来进行循环渲染。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: ['苹果', '香蕉', '橙子']
      }
    }
  }
</script>