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>

效果:

猜你喜欢

转载自blog.csdn.net/qq_42036616/article/details/82887006
今日推荐