条件判断 v-if v-show

v-if 与 v-show 的区别

<div id="app">
  <input type="checkbox" v-model="isShow">
  <div v-if="isShow">
    <p>v-if</p>
  </div>
  <div v-show="isShow">
    <p>v-show</p>
  </div>
</div>

const vm = Vue.createApp({
  data() {
    return {
      isShow: true,
    }
  }
}).mount('#app')

用 v-model 双向绑定 data 的 isShow ，当 isShow 为 true 时，v-if 和 v-show 会显示，
false 比较特别，v-if 是整个元素都消失，v-show则变成display:none隐藏起来：

data 的 isShow 值为： true。

data 的 isShow 值为： false，v-show 始终都会保留在 DOM 中，v-if 是真正的条件渲染，依据条件，销毁或是重建。

v-else

<div  v-if="value === A">A</div>
<div  v-else>B</div>

v-else 元素必须接在 v-if 或 v-else-if，才能确保 v-else 是预期产生出来的元素。

v-else-if

<div  v-if="total === 0"> {{ total }} </div>
<div  v-else-if="total > 5" style="background-color: blue;"> {{ total }} </div>
<div  v-else="total > 10" style="background-color: red;"> {{ total }} </div>

v-else-if 也是必须接在 v-if 之後，v-else-if = "条件" ，相当於 JavaScript 的 else if(条件)。

如上述有问题，请不吝给予指教

参考资料

重新认识 Vue.js
Vus.js 官网