1、案例1
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>条件渲染</title> </head> <body> <div id="app"> <!-- v-if v-else和v-show有着本质的区别： v-if v-else在隐藏时是直接从dom中移除， v-show在隐藏时只是在dom中通过样式隐藏起来了 --> <!--isSuccess为true时显示success1，为false时显示fail1。--> <p v-if="isSuccess">success1</p> <p v-else>fail1</p> <!--isSuccess为true时显示success2，为false时显示fail2。--> <p v-show="isSuccess">success2</p> <p v-show="!isSuccess">fail2</p> </div> <script src="../js/vue.js" type="text/javascript"></script> <script> const vm = new Vue({ el: "#app", data: { isSuccess: false } }); </script> </body> </html>