v-if控制元素的显示与隐藏

`v-if` 是 Vue.js 的一种条件渲染指令，用于根据表达式的值的真假来有条件地渲染元素。 例如，如果你有一个布尔类型的数据 `showImage`，你可以使用 `v-if` 来控制一个图片的显示与隐藏： ```html <template> <div> <img v-if="showImage" src="https://example.com/image1.jpg"> </div> </template> <script> export default { data() { return { showImage: true }; } } </script> ``` 在上面的示例中，如果 `showImage` 的值为 `true`，则图片会被渲染出来；如果 `showImage` 的值为 `false`，则图片不会被渲染出来。 你也可以使用 `v-else` 指令来添加一个 else 块： ```html <template> <div> <p v-if="showImage">显示图片</p> <p v-else>不显示图片</p> </div> </template> <script> export default { data() { return { showImage: true }; } } </script> ``` 在这个示例中，如果 `showImage` 的值为 `true`，则显示“显示图片”；如果 `showImage` 的值为 `false`，则显示“不显示图片”。