具体代码如下

<template>
  <div>
    <h1>条件判断</h1>
    <!-- isshowm  当if条件判断为false时,删除该元素 -->
    <div v-if="isShow">isshow为true才能显示</div>
    <div v-else-if="isElse">isElse为true的时候才显示</div>
    <div v-else>所有条件都不满足</div>

    <!-- v-show  value为false时  元素隐藏 并没有删除-->
    <div v-show="isShow2">通过v-show来控制条件渲染</div>
  </div>
</template>

<script>
export default {
  name: 'demo1',
  data () {
    return {
      isShow: true,
      isElse: true,
      isShow2: true
    }
  },
  mounted () {
    setTimeout(() => {
      this.isShow = false
    }, 3000)
    setTimeout(() => {
      this.isElse = false
    }, 1000)
  }
}
</script>

Logo

前往低代码交流专区

更多推荐