vue组件切换—v-if和v-else切换两种状态

最新推荐文章于 2024-08-21 11:45:01 发布

何迟

最新推荐文章于 2024-08-21 11:45:01 发布

阅读量5.4k

点赞数

分类专栏： Vue 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/82887006

版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章 5 订阅

订阅专栏

Vue

31 篇文章 0 订阅

订阅专栏

注意：

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

效果：