谈谈v-if 与v-show

v-if 与 v-show 都可以实现在dom中控制元素的显示与隐藏,但二者实际有本质上的区别.

首先,使用v-if 和v-else 将元素显示隐藏会使dom中的节点创建或销毁,而v-show控制的显示与隐藏只是在dom中给了元素一个display: none的css样式属性

v-if方法中

<template>
  <div>
    <p>小朋友们大家好</p>
    <button @click="b">change</button>
    <p v-if="show">好</p>
    <p v-else-if="!show">不好</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: true,
    }
  },
  methods: {
    b() {
      this.show ? this.show = false : this.show = true
    }
  }
}
</script>

此时的document只会显示其中一个元素,而另一个元素则是完全不存在的:

 

 v-show方法(上图script部分不做修改)

<template>
  <div>
    <p>小朋友们大家好</p>
    <button @click="b">change</button>
    <!-- <p v-if="show">好</p>
    <p v-else-if="!show">不好</p> -->
    <p v-show="show">好</p>
  </div>
</template>

此时点击按钮切换将给目标元素添加一个display: none属性:

其次,v-if支持template语法,而v-show不支持template语法

<template>
  <div>
    <p>小朋友们大家好</p>
    <button @click="b">change</button>
    <!-- <p v-if="show">好</p>
    <p v-else-if="!show">不好</p>
    <p v-show="show">好</p> -->
    <template v-if="show">
    <p>好</p>
    </template>
    <template v-show="show">
    <p>好家伙</p>
    </template>
  </div>
</template>

此时,v-show部分失效,其中的dom元素不受v-show的控制

如果开启了eslint,它会自动指出template标签内禁止使用v-show

总结:由于v-if会进行dom节点的创建销毁操作,会大量消耗性能.在需要频繁切换dom元素的显示隐藏时,推荐使用v-show