v-if,v-else

使用v-if,v-else实现组件切换


<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>组件切换title>
  <script src="./lib/vue-2.4.0.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>

  <script>
    Vue.component('login', {
      template: '

登录组件

'
}) Vue.component('register', { template: '

注册组件

'
}) // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: false }, methods: {} });
script> body> html>

在这里插入图片描述
在这里插入图片描述

官方提供的component标签


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件切换title>
  <script src="./lib/vue-2.4.0.js">script>
head>
<body>
  <div id="app">
    <a href="" @click.prevent="comName='login'">登录a>
    <a href="" @click.prevent="comName='register'">注册a>
    <component :is="comName">component>
  div>
  <script>
    Vue.component('login', {
      template: '

登录组件

'
}) Vue.component('register', { template: '

注册组件

'
}) // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data:{ comName: "login" } });
script> body> html>

学习资源推荐:https://blog.csdn.net/qq_42813491/article/details/90213353

你可能感兴趣的:(前端--vue)