vue可以通过v-if设置元素的显示隐藏 还可以配合v-else使用
配合点击事件来演示一下
点击按钮，按钮上文字变化，内容显示，再次点击，按钮上文字内容变化，内容隐藏
代码部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue-test3</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> </head> <body> <div id="test"> <button @click="clickFun()">{{text}}</button> <p v-if="show"> 显示/隐藏 </p> </div> <script> const vm = new Vue({ el: '#test', data: { show: true, text: '点击隐藏', }, methods: { clickFun() { // 改变show的值true/false this.show = !this.show; // 三元运算，改变按钮文字内容 this.text = this.show ? '点击隐藏' : '点击显示'; } } }) </script> </body> </html>
如果在写一个标签，标签内加上v-els
<div id="test"> <button @click="clickFun()">{{text}}</button> <p v-if="show"> 显示/隐藏 </p> <p v-else>v-else内容</p> </div>
就是这个效果
注意，如果这样用，加v-if和v-else的标签之间不能有其他的内容
V-show和v-else在页面上可以实现同样的效果 ，但是v-if是通过元素的移除/添加来实现显示隐藏，v-show是通过修改元素的display来实现的
如果同时多个元素实现显示隐藏，可以用vue的template标签
<template v-if="show"> <p> 显示/隐藏1 </p> <p> 显示/隐藏2 </p> </template>