<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈啥，打字辛苦啊！！！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: false,
    ok: false
  }
})
</script>

如上代码。如果seen和ok都是true。就会把内容插入网页。如果是false就不会插入了。
如果seen为true而ok为false。结果就是

image.png

总而言之，谁是true，就有谁。

自己模仿一个例子

<div id="app">
<div v-if="shacha">good man</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    shacha:true
  }
})
</script>

使用方法就是在任意元素内随便写一个v-if=“xx”。
然后在script标签内规定xx的true or false。 true那段代码就会执行。 xx随便编，只要能跟data标签里的对应起来就行。

如果用原生js实现该功能的话，就得先获取Dom元素，然后采用if语句，之后采用隐藏或者显示方法。想想都麻烦。

总而言之，js是个垃圾！所以前端框架层出不穷~~~