v-if和v-show的区别（一语道破）

v-if

来看看官方文档对于v-if的定义

v-show

来看看官方文档对于v-if的定义

<div id='app'>
  <h1 v-if='false'>{
    
    {
    
    message}}<h1>
  <h1 v-show='true'>{
    
    {
    
    message}}</h1>
<div>

<script>
  const app = new Vue({
    
    
    el:"#app",
    data:{
    
    
      message:"我喜欢刘亦菲"
    }
  })
</script>

看一下运行效果

可以看出来，使用v-if的h1标签根本没有出来
在来更改一下布尔值

<div id='app'>
  <h1 v-if='true'>{
    
    {
    
    message}}<h1>
  <h1 v-show='false'>{
    
    {
    
    message}}</h1>
<div>

可以看到v-show控制的h6标签虽然没有显示，但是仍然出现在了dom树上

区别

1. v-if在渲染的时候相当于就没有创建这个dom节点，这个元素压根不存在
2. v-show在渲染的时候相当于在在渲染出这个dom节点的情况下，给元素添加了一个css属性display：none
3. 当需要在显示和隐藏之间切换很频繁时：v-show
4. 只有一次切换时：v-if