控制切换一个元素是否显示也相当简单

<div id="conditional-rendering">
  <span **v-if="seen"**>现在你看到我了</span>
</div>
<script>
  const ConditionalRendering = {
    data() {
      return {
        **seen: true**
      }
    }
  }

  Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
</script>

这个例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute，还可以绑定到 DOM 的结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用**过渡效果**。

通过按钮控制dom的渲染

<div id="conditional-rendering">
  <span v-if="seen">现在你看到我了</span>
  <button v-on:click="switchSeen">切换</button>
</div>
<script>
  const ConditionalRendering = {
    data() {
      return {
        seen: true
      }
    },
    methods: {
      switchSeen() {
        this.seen = !this.seen
      }
    }
  }

  Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
</script>