组件切换-使用 v-if 和 v-else 结合 flag 进行切换|学习笔记

开发者学堂课程【Vue.js 入门与实战：组件切换-使用 v-if 和 v-else 结合 flag 进行切换】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/586/detail/8180

组件切换-使用 v-if 和 v-else 结合 flag 进行切换

一、v-if 和 v-else 组件切换

实现不同组件的切换，在Vue里怎么实现两个组件的切换，新建一个 html。

1.首先要有两个组件

^{<script>   vue.component(‘login’,{template:’<h3>登录组件</h3>’ })vue.component(‘register’,{template:’<h3>注册组件</h3>’ })}

2.实现点击链接，让这两个组件实现切换

例：<div id=”app”><a href=”” >登录</a><a href=”” >注册</a>

3.把这两个组件往页面上引用一下，再右键浏览

<login v-if=”flag”></login><register v-else=”flag”></register></div>

4.两个都显示出来了，默认只展示登录不展示注册

var vm = new vue({     el:’#app’,     data:{        flag:true     },     methods:{}   })

5. 如果 flag 为 t rue 只展示 login 不展示 register

<login v-if=＂flag＂></login>  <register v-else=＂flag＂></register>

6. 注册组件和登录组件展示与否是由flag来实现，点击登录和注册时修改 flag 的值

7. 在a标签里添加点击事件

<a href=”” @click.prevent=”flag=ture”>登录</a><a href=””  @click.prevent=”flag=false”>注册</a>