Vue：條件渲染
阿新 • • 發佈：2021-11-08
V-show（使用頻繁切換）
點選檢視程式碼
<!DOCTYPE html> <html lang="en" xmlns:> <head> <meta charset="UTF-8"> <!-- 開發環境版本，包含了有幫助的命令列警告 --> <script src="js/vue.js"></script> <title>Title</title> </head> <body> <div id="firstVue"> <h1>條件渲染</h1> <h1>V-show</h1> <!--能放屬性--> <h2 v-show="x">是</h2> <!--能放表示式--> <h2 v-show="x==false">sss</h2> </div> </body> <script type="text/javascript"> //關閉生成提示 Vue.config.productionTip=false; let v=new Vue({ el:"#firstVue", data:{ firstname:"張", x:true } }) console.log(v) </script > </html>
V-if（直接幹掉）
點選檢視程式碼
<!DOCTYPE html> <html lang="en" xmlns:> <head> <meta charset="UTF-8"> <!-- 開發環境版本，包含了有幫助的命令列警告 --> <script src="js/vue.js"></script> <title>Title</title> </head> <body> <div id="firstVue"> <h1>條件渲染</h1> <h1>V-if</h1> <button @click="add">加一</button> <h2 v-if="x==1">是</h2> <h2 v-if="x==2">sss</h2> <h2 v-if="x==3">ns</h2> </div> </body> <script type="text/javascript"> //關閉生成提示 Vue.config.productionTip=false; let v=new Vue({ el:"#firstVue", data:{ firstname:"張", x:0 }, methods:{ add(){ this.x++; } } }) console.log(v) </script > </html>