在 Vue 中 v-showv-if 都能实现元素的显示或隐藏,但是两个指令还是有些不一样的。这里就简单写一下 v-showv-if 两个指令的区别和用法。

v-show

v-show 的功能是条件展示,如果条件为 true 就显示,否则就隐藏。v-show 的显示和隐藏主要是更改 CSS 的 display 属性,并不会重新渲染或删除元素。

使用方法

<template>
  <div id="app">
    <button type="button" @click="boxShow = !boxShow">显示/隐藏</button>
    <div class="box" v-show="boxShow"></div>
  </div>
</template>
export default {
  name: 'app',
  data () {
    return {
      boxShow: true
    }
  }
}

divv-show 绑定了 data 中的 boxShowboxShowtrue div 就会显示,为 false div 会隐藏。所以只要改变 boxShow 就能让 div 显示或隐藏。

效果如下:

v-show的效果

下面是 v-show 的 DOM 变化:

v-show的DOM变化

可以看到如果条件为 false style 就会加入 display: none

使用场景

v-show 无论初始值为 true 还是 false 元素都会被渲染,显示和隐藏也只是更改 display。比较适合用在一些需要平凡切换显示和隐藏的场景,例如对话框之类的。

v-if

v-if 的功能是条件渲染,只有条件为 true 才会渲染。如果 v-if 的初始值为 false ,元素就不会渲染。如果中途改变 v-if 的值为 false ,元素会被删除。

使用方法

<template>
  <div id="app">
    <button type="button" @click="boxShow = !boxShow">显示/隐藏</button>
    <div class="box" v-if="boxShow"></div>
  </div>
</template>
export default {
  name: 'app',
  data () {
    return {
      boxShow: true
    }
  }
}

v-if 绑定了 boxShow ,如果 boxShowtrue div 就会被渲染,否则 div 就会被删除。v-if 的用法和 v-show 是差不多的。

v-if 的外观效果和 v-show 差不多,下面是 v-if 的 DOM 变化:

v-ifDOM变化

可以看到如果条件为 false 元素会被直接删除,如果条件为 true 元素会被重新渲染。

配合 v-else 使用

v-else 需要配合 v-if 使用,如果条件为 true 就渲染 if 元素,否则就渲染 v-else 元素。

用法如下:

<template>
  <div id="app">
    <button type="button" @click="box1 = !box1">切换box</button>
    <div class="box" v-if="box1">box1</div>
    <div class="box" v-else>box2</div>
  </div>
</template>
export default {
  name: 'app',
  data () {
    return {
      box1: true
    }
  }
}

上面的代码只要 v-if 的条件为 true 就会渲染第一个 div,否则就渲染第二个 div

注意!v-else 元素必须紧跟在 v-if 元素的后面,否则将不会被识别。

效果如下:

v-else效果

配合 v-else-if 使用

v-else-if 也需要配合 v-if 使用,可以做连续判断。

用法如下:

<template>
  <div id="app">
    <button type="button" @click="type = 'A'">A</button>
    <button type="button" @click="type = 'B'">B</button>
    <button type="button" @click="type = 'C'">C</button>
    <button type="button" @click="type = ''">无</button>
    <div class="box" v-if="type === 'A'">A</div>
    <div class="box" v-else-if="type === 'B'">B</div>
    <div class="box" v-else-if="type === 'C'">C</div>
    <div class="box" v-else>无</div>
  </div>
</template>
export default {
  name: 'app',
  data () {
    return {
      type: 'A'
    }
  }
}

上面的 v-ifv-else-if 都绑定了 data 中的 type,只有条件满足才会渲染,如果都不满足就渲染 v-else 的元素。

效果如下:

v-else-if效果

使用场景

因为 v-if 会重新渲染或删除元素,而且如果初始条件为 false 就不会渲染。比较适合用在一些不需要平凡切换或内容较多的元素。例如不同页面之间切换就比较适合用 v-if

配合动画使用

Vue 提供了 transition 的封装组件,可以给使用 v-showv-if 的元素添加过渡动画。

使用方法

<template>
  <div id="app">
    <button type="button" @click="show = !show">显示/隐藏</button>
    <transition name="fade">
      <div class="box" v-show="show"></div>
    </transition>
  </div>
</template>
export default {
  name: 'app',
  data () {
    return {
      show: true
    }
  }
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

要使用过渡动画的元素需要写在 transition 内。

效果如下:

vue过渡动画

Vue 使用的是 CSS3 的 transition 动画。

更多关于过渡动画的说明可以查看 官网的说明

相关文章:


版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/823/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。

发表评论