vue元件切換—v-if和v-else切換兩種狀態
阿新 • • 發佈:2018-12-12
注意:
通過v-if或者v-else切換顯示註冊和登入,但是隻能在兩種狀態下切換
HTML程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../lib/vue.js"></script> </head> <body> <div id="app"> <a href="" @click.prevent="flag=true">登入</a> <a href="" @click.prevent="flag=false">註冊</a> <login v-if="flag"></login> <register v-else="flag"></register> </div> <!--通過v-if或者v-else切換顯示註冊和登入,但是隻能在兩種狀態下切換--> <script> Vue.component('login',{ template:'<h3>登入</h3>' }); Vue.component('register',{ template:'<h3>註冊</h3>' }); var vm = new Vue({ el:'#app', data:{ flag:true }, method:{} }); </script> </body> </html>
效果: