The difference between v-if and v-show (in a word)

v-if

Let's take a look at the official document's definition of v-if

v-show

Let's take a look at the official document's definition of 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>

Looking at the running effect, we

can see that the h1 tag using v-if is not coming out
at all. Let’s change the Boolean value.

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

You can see that although the h6 tag controlled by v-show is not displayed, it still appears on the dom tree

the difference

1. When v-if is rendered, the dom node is not created, and this element does not exist at all
2. When v-show is rendered, it is equivalent to adding a CSS attribute display: none to the element when the dom node is rendered.
3. When it is necessary to switch between show and hide frequently: v-show
4. When there is only one switch: v-if