<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<a href="#" @click.prevent="cname='login'">登录</a>
<a href="#" @click.prevent="cname='register'">注册</a>
<!-- component是一个占位符，:is属性，显示组件-->
<!--<component :is="'login'"></component>-->
<component :is="cname"></component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
<script>
Vue.component('login',{
template:'<h3>登录组件</h3>'
})
Vue.component('register',{
template:'<h3>注册组件</h3>'
})
var vm = new Vue({
el:'#app',
data:{
cname:'login'
},
methods:{

}
})
</script>
</body>
</html>

vue动态切换组件的更多相关文章

  1. 第八十七篇：Vue动态切换组件的展示和隐藏

    好家伙, 1.什么是动态组件? 动态组件指的是动态切换组件的限制与隐藏 2.如何实现动态组件渲染 vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染. 可以将其看 ...

  2. vue 如何动态切换组件，使用is进行切换

    日常项目中需要动态去切换组件进行页面展示. 例如:登陆用户是“管理员”或者“普通用户”,需要根据登陆的用户角色切换页面展示的内容.则需要使用 :is 属性进行绑定切换 <template> ...

  3. Vue动态创建组件方法

    组件写好之后有的时候需要动态创建组件.例如: 编辑文章页面,正文是一个富文本编辑器,富文本编辑器是一个第三方的组件,点击添加章节的时候需要动态的创建一个富文本编辑器这个时候怎么处理呢. 富文本编辑器也 ...

  4. vue动态子组件的实现方式

    让多个组件使用同一个挂载点,并动态切换,这就是动态组件. 通过使用保留的 <component>元素,动态地绑定到它的 is 特性,可以实现动态组件. 方式一:局部注册所需组件 <d ...

  5. vue动态切换视图

    big.vue <template> <div> big <p>{{view}}</p> <!--标准规范--> <component ...

  6. Vue内置的Component标签用于动态切换组件

    html <div id="app"> <component :is="cut"></component> <butt ...

  7. 【Html】Vue动态插入组件

    html: <div id="app"> <p>{{ message }}</p> <button @click="add('a ...

  8. vue 动态插入组件

    HTML代码: <div id="app"> <p>{{ message }}</p> <button @click="add( ...

  9. vue2.0 动态切换组件

    组件标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件. <!DOCTYPE html> <html lang="en" ...

随机推荐

  1. E. Vanya and Balloons Codeforces Round #355 (Div. 2)

    http://codeforces.com/contest/677/problem/E 题意:有n*n矩形,每个格子有一个值(0.1.2.3),你可以在矩形里画一个十字(‘+’形或‘x’形),十字的四 ...

  2. （七）File 文件的操作

    一.文件读写模式 1.文件的几种模式: 格式:f=open("文件名","模式",encode="utf-8") #文件的只读模式 f1=o ...

  3. JavaScript之深入理解【函数】

    一 参考文献 <JavaScript忍者秘籍>   二 函数特征总结 1. 函数是[第一型对象(first-class object)]:可以像这门语言的其它对象一样使用 函数可以共处,可 ...

  4. IDEA （mac版）

    mac键:option=alt command=ctrl idea快捷键 command+Enter(get,set界面) command+alt+L (格式化代码) ctrl+shift+space ...

  5. java Socket实例

    可以实现客户端与服务端双向通信,支持多客户端连接,客户端断开连接,服务端不会出现异常 服务端代码: package com.thinkgem.jeesite.modules.socketTest.de ...

  6. 20175306 迭代和JDB调试

    迭代和JDB调试 1.使用C(n,m)=C(n-1,m-1)+C(n-1,m)公式进行递归编程实现求组合数C(m,n)的功能 代码展示: public class C { public static ...

  7. 3D Slicer中文教程（七）—图像中值滤波

    1.中值滤波概念 中值滤波是对一个滑动窗口内的诸像素灰度值排序,用其中值代替窗口中心象素的原来灰度值,它是一种非线性的图像平滑法,它对脉冲干扰级椒盐噪声的抑制效果好,在抑制随机噪声的同时能有效保护边缘 ...

  8. 备考2019年6月份PMP考试-分享一些（备考）考试心得

    I'm iron man,纪念离去的钢铁侠(复联4) 话说任何一个写程序的人都不可能干一辈子(有些人例外),大部分都是要转行的. 技术转管理是一条路,技术转创业是一条路,技术干销售是一条路,技术转售前 ...

  9. COGS2187 [HZOI 2015] 帕秋莉的超级多项式

    什么都别说了,咱心态已经炸了... question 题目戳这里的说... 其实就是叫你求下面这个式子的导函数: noteskey 其实是道板子题呢~ 刚好给我们弄个多项式合集的说... 各种板子粘贴 ...

  10. ffmpeg错误：Invalid UE golomb code

    解决方案在github https://github.com/FFmpeg/FFmpeg/commit/c51c08e0e70c186971385bdbb225f69edd4e3375 问题简要描述为 ...