在vue3中使用v-if来判断渲染哪个表格应该怎么写
时间: 2023-05-26 14:06:12 浏览: 106
在 Vue3 中,使用 `v-if` 来判断渲染哪个表格的写法与 Vue2 相同。
示例代码如下:
```html
<template>
<div>
<button @click="showTable1 = !showTable1">Toggle table 1</button>
<button @click="showTable2 = !showTable2">Toggle table 2</button>
<table v-if="showTable1">
<!-- table1 content here -->
</table>
<table v-else-if="showTable2">
<!-- table2 content here -->
</table>
<p v-else>No table to show</p>
</div>
</template>
<script>
export default {
data() {
return {
showTable1: true,
showTable2: false,
};
},
};
</script>
```
在上面的示例代码中,我们使用了 `v-if` 和 `v-else-if` 来判断当前要显示哪个表格,如果两者都不满足,则最后使用 `v-else` 显示 “No table to show” 的文本信息。
在 `data` 中声明了两个变量 `showTable1` 和 `showTable2` ,分别表示是否显示表格1和表格2。通过点击按钮,可以切换显示/隐藏相应的表格。
阅读全文