条件渲染

  • 在某些情况下,我们需要通过当前的条件决定某些元素或组件是否渲染,这个时候就需要进行条件判断。
  • Vue 提供了 下面的指令来进行条件判断
    • v-if
    • v-else-if
    • v-else
    • v-show

v-if、v-else-if、v-else

  • 这三个指令于JS的条件语句if、else、else if 类似
  • 以成绩等级显示为例子
    • 	<template id="my-app">
        	<input type="text" v-model="score">
        	<h2 v-if="score >= 90">优秀</h2>
        	<h2 v-else-if="(score > 60 )">良好</h2>
        	<h2 v-else>不及格</h2>
      
      	 </template>
      
    • v-model 是一个双向绑定语法糖,简单的来说,input中的值会保存在 score中,score中的值会在input中显示。
    • 当分数满足的条件不同时,就渲染不同的标签
  • v-if 的渲染原理:
    • v-if 是惰性的
    • 当条件为false时,其判断的内容完全不会被渲染或者会被销毁掉
    • 当条件true时,才会真的正渲染条件快中的内容
  • v-if 可以作用在 template标签上,template 标签不会被渲染成 DOM树上

v-show

  • v-show 就时 相当于 display:none。也就是说,它会被渲染到DOM树上。但是,在浏览器中显示,通过v-show动态控制css的属性。
  • v-show 不支持 template

开发中v-show 和 v-if 的选择

  • 如果需要频繁的显示和隐藏之间的切换使用v-show

  • 如果不需要频繁的发生切换,那么使用v-if

  • 共同点 都会被渲染成 vnode