你的位置:首页 > Java教程

[Java教程]第二节:指令的使用(1)


1、v-if 指令可以完全根据表达式的值在Dom中生成或移除一个元素。

  例如:

    <div id ="example">

      <p v-if="greeting">Hello!</p>

    </div>

    <script>

      new Vue({

        el:"#example",

        data:{

          greeting:false;

        }

      });

    </script>

2、v-show指令是根据表达式的值来显示或者隐藏HTML元素。

  

 例如:

    <div id ="example">

      <p v-show="greeting">Hello!</p>

    </div>

    <script>

      new Vue({

        el:"#example",

        data:{

          greeting:false;

        }

      });

    </script>

3、v-if 和 v-show 的区别:

  • v-if 支持<template> , v-show 不支持。
  • v-if 是真是的条件渲染,会对元素进行销毁和重建,而 v-show只是基于css的切换(display:none)。
  • v-if 是惰性的,如果第一次渲染为false,什么也不做,在条件第一次变为true的时候才会局部编译。因为v-if 是局部编译的过程(会被缓存),而v-show不是。
  • v-if 切换的时候消耗多,v-show第一次渲染的时候消耗多。