Vue条件判断

v-if

v-if后面的条件为false时，对应元素及子元素不会渲染，也就是说不会有对应的标签出现在DOM中。

<div id="app">
    <h2 v-if="isShow">{{message}}</h2>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        isShow: false
      }
    })

v-if和v-else结合使用

<div id="app">
    <h2 v-if="isShow">
      <div>abc</div>
      <div>abc</div>
      <div>abc</div>
      <div>abc</div>
      {{message}}
    </h2>
    <h1 v-else>isShow为false显示我</h1>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        isShow: false
      }
    })

v-if和v-else-if结合使用

<div id="app">
    <h2 v-if="score>90">优秀</h2>
    <h2 v-else-if="score>80">良好</h2>
    <h2 v-else-if="score>60">及格</h2>
    <h2 v-else>及格</h2>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({ 
      el: '#app',
      data: {
        score: 99
      }
    })

v-show和v-if的对比

v-show和v-if的用法非常相似，也用于决定一个元素是否显示

<div id="app">
    <!-- 
      v-if:当条件为flase时，包含v-if指令的元素，根本就不会存在dom中
     -->
    <h2 v-if="isShow" id="aaa">{{message}}</h2>
    <!-- 
      v:show:当条件为false时，v-show只是给我们的元素添加一个行内样式：display:none:
     -->
    <h2 v-show="isShow" id="bbb"></h2>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        isShow: true
      }
    })
  </script>

当我们需要在显示和隐藏之间切换的很频繁时选用v-show，一次切换时，通常使用v-if