组件切换方式(Vue.js)

作者: 日期:2019-08-13

这里,我们需要学到一个 vue 官方 提供的 元素 component。

 !doctype html 
 html lang="zh-cn" 
 head 
 meta charset="utf-8" / 
 title 独秀不爱秀 /title 
 /head 
 body 
 div id="app" 
 a href="#" @click.prevent="comname = 'login'" 登录 /a 
 a href="#" @click.prevent="comname = 'register'" 注册 /a 
 !-- 
 vue 提供的 component 来展示对应名称的组件
 component 是一个占位符
 :is 属性指定 组件名称
 component :is="comname" /component 
 /div 
 script src="./lib/vue-2.4.0.js" /script 
 script type="text/javascript" 
 // 组件名称是字符串
 vue.component('login', {
 template: ' h3 登录组件 /h3 '
 vue.component('register', {
 template: ' h3 注册组件 /h3 '
 const vm = new vue({
 el: '#app',
 data: {
 comname: 'login'// 当前 component 中的 :is 绑定的组件名称
 /script 
 /body 
 /html 

现在,我们在添加一个退出组件

 !doctype html 
 html lang="zh-cn" 
 head 
 meta charset="utf-8" / 
 title 独秀不爱秀 /title 
 /head 
 body 
 div id="app" 
 a href="#" @click.prevent="comname = 'login'" 登录 /a 
 a href="#" @click.prevent="comname = 'register'" 注册 /a 
 a href="#" @click.prevent="comname = 'out'" 退出 /a 
 !-- 
 vue 提供的 component 来展示对应名称的组件
 component 是一个占位符
 :is 属性指定 组件名称
 component :is="comname" /component 
 /div 
 script src="./lib/vue-2.4.0.js" /script 
 script type="text/javascript" 
 // 组件名称是字符串
 vue.component('login', {
 template: ' h3 登录组件 /h3 '
 vue.component('register', {
 template: ' h3 注册组件 /h3 '
 vue.component('out', {
 template: ' h3 退出组件 /h3 '
 const vm = new vue({
 el: '#app',
 data: {
 // 默认显示 登录组件
 comname: 'login'// 当前 component 中的 :is 绑定的组件名称
 /script 
 /body 
 /html 

切换成功。

首页
电话
短信
联系