1. 程式人生 > >vue元件切換—v-if和v-else切換兩種狀態

vue元件切換—v-if和v-else切換兩種狀態

注意:

         通過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>

效果: