vue3学习4：v-if，v-show，v-else，v-else-if

v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；v-show 指令会动态为元素添加或移除 style=“display: none;” 样式，从而控制元素的显示与隐藏。
如果需要非常频繁地切换，使用 v-show
如果运行时条件很少改变，使用 v-if

举个栗子

<template>
  <div id="app">
    <h3>请输入一个数字：</h3>
    <br>
    <input type="text" v-model.number="num" >
    <button @click="submit">确认</button>
    <p v-if="flag">成功输入 --- 被 v-if 控制</p>
    <p v-show="flag">成功输入 --- 被 v-show 控制</p>
    <p>---------</p>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      num:0,
      flag:false,
    }
  },
  methods:{
    submit(){
      if(this.num!=0)
      {
        // flag 用来控制元素的显示与隐藏
        // 值为 true 时显示元素
        // 值为 false 时隐藏元素
      this.flag=true
      }
    }

  }
}
</script>

v-if与v-else
v-if和v-else是在一起用的，当v-if的条件值为false时，就是执行v-else语句所在的标签

<template>
  <div id="app">
    <h3>请输入一个数字：</h3>
    <input type="text" v-model.number="num" >
    <button @click="submit">确认</button>
    <div v-show="fl">
    <p v-if="flag">数字为正数 --- 被 v-if 控制</p>
    <p v-else>数字为负数 --- 被 v-else 控制</p>
    </div>
    <p>---------</p>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      num:'',
      flag:false,
      fl:false
    }
  },
  methods:{
    submit(){
      this.fl=true
      if(this.num>=0)
      {
        // flag 用来控制元素的显示与隐藏
        // 值为 true 时显示元素
        // 值为 false 时隐藏元素
      this.flag=true
      }
    }

  }
}
</script>

v-else-if
充当 v-if 的“else-if 块”，可以连续使用
举个栗子

<template>
  <div id="app">
    <h3>请输入一个数字：</h3>
    <input type="text" v-model.number="num" >
    <button @click="submit">确认</button>
    <div v-show="fl">
    <p v-if="num>100">数字大于100 --- 被 v-if 控制</p>
    <p v-else-if="num>0">数字大于0 --- 被 v-else-if 控制</p>
    <p v-else>数字小于0 --- 被 v-else 控制</p>
    </div>
    <p>---------</p>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      num:'',
      fl:false
    }
  },
  methods:{
    submit(){
      this.fl=true
    }

  }
}
</script>