v-if

 

条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示：

 

v-if 指令

在元素中使用 v-if 指令：

 

<div id="app">

    <p v-if="seen">现在你看到我了</p>

</div>

    

<script>

const app = {

  data() {

    return {

      seen: true /* 改为false，信息就无法显示 */

    }

  }

}

 

Vue.createApp(app).mount('#app')

</script>

 

 

这里， v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。

 

因为 v-if 是一个指令，所以必须将它添加到一个元素上。如果是多个元素，可以包裹在 <template> 元素上，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。