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>