Vue的学习 ---Cap5

Posted 2020-12-18 edwords-blog

今天我来到了API教程里的第八节 ----条件渲染

如果你也有看文档的，那么对于这个 ” v-if “一定不会陌生。这个指令很有趣，能够直接让你在对已获取到的div里面进行条件执行。请看代码：

   <div id="app" >
      <div v-if="type === ‘A‘">
         A
      </div>
      <div v-else-if="type === ‘B‘">
         B
      </div>
      <div v-else-if="type === ‘C‘">
         C
      </div>
      <div v-else>
         不是A、B、C的div
      </div>
   </div>

1 var data = {
2     type: "B",
3 }
4 var vm = new Vue({
5     el: ‘#app‘,
6     data:data,
7 })

如你所见，当我们在data对象里的type变量命名后，我们可以字节在#app的子节点里面进行条件渲染，很简单，但是很好用！！！这里渲染的是”B“.

除此之外，还有一个 --- ”v-show“,请看代码：

<h1 v-show="ok">Hello Vue!!!</h1>

var data = {
    type: "B",
    ok: true,
}
var vm = new Vue({
    el: ‘#app‘,
    data:data,
})

显而易见，我们可以通过对ok的真值来赋值控制h1的显示和不显示，不过这里需要区分好 v-show 和 v-if的区别的， 他们两个的功能相似，但是所用的方法确是截然不同的。

比如，v-if的false是直接注释掉自己所在的div的节点甚至所有子节点全部都注释了，这块代码完全不生效。而v-show的真值控制的确实style里面的display属性，若为false则display为 ”none“ 或者说 ”0“

总而言之，通过v-show来控制div的消失与否比直接用v-if来得要舒服点，v-show控制的display那我们就有了更多的操作余地。