这里, v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。
因为 v-if 是一个指令,所以必须将它添加到一个元素上。如果是多个元素,可以包裹在 <template> 元素上,并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
<div id="app">
<template v-if="seen">
<h1>网站</h1>
<p>Google</p>
<p>Runoob</p>
<p>Taobao</p>
</template>
</div>
<script>
const app = {
data() {
return {
seen: true /* 改为false,信息就无法显示 */
}
}
}
Vue.createApp(app).mount('#app')
</script>