vue的条件渲染

有两种方式：

1. v-if
   a.单路分支

          <p v-if = " f ">
            true
          </p>

b.双路分支

         <p v-if = " f ">
           true
         </p>
         <p v-else>
           false
         </p>

c.多路分支

          <p v-if = " text === 'A'"> A </p>
          <p v-else-if = " text === 'B'"> B </p>
          <p v-else> C </p>

2. v-show

         <p v-show = " f ">
          if条件
        </p>

      new Vue({
  el: '#app',
  data: {
    f: false,
    text: 'A'
  }
})

v-if vs v-show
1. v-if 操作的是DOM存在与否, v-show操作的DOM的display样式属性
2. 性能
* 如果条件为假，v-show有较高的初始渲染开销
* v-if 有更高的切换开销

项目中建议：
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。