<!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. mac air中编译安装swoole

    本机php版本, 我的7.3.0 1 下载swoole源码 https://github.com/swoole/swoole-src/releases 我下载的版本是swoole-src-4.3.3. ...

  2. easyui时间框只选择年月

    html: <input type="text" id="datetime" > js: <script type="text/ja ...

  3. sql选择

    关系型数据库遵循ACID规则 1.A (Atomicity) 原子性 原子性很容易理解,也就是说事务里的所有操作要么全部做完,要么都不做,事务成功的条件是事务里的所有操作都成功,只要有一个操作失败,整 ...

  4. Redis缓存穿透和缓存雪崩以及解决方案

    Redis缓存穿透和缓存雪崩以及解决方案 Redis缓存穿透和缓存雪崩以及解决方案缓存穿透解决方案布隆过滤缓存空对象比较缓存雪崩解决方案保证缓存层服务高可用性依赖隔离组件为后端限流并降级数据预热缓存并 ...

  5. XAMARIN 安卓程序闪退问题

    参考:https://forums.xamarin.com/discussion/25780/unfortunately-app-name-has-stopped 在VS 2017中使用Xamarin ...

  6. Filebeat 启动关闭流程

    启动阶段: instance/beat.go #打印home路径.配置路径.数据路径和日志路径 seccomp #Syscall filter检查 instance/beat.go #beat inf ...

  7. 011_TCP专项研究监控

    (1)In Segs 数据源: /proc/net/snmp; 采集方式:累计值,每10秒采集一次取差值: 指标:net.snmp.tcp (key: system); In Segs: tcp协议层 ...

  8. linux部署dns内网服务器

    安装: yum -y install bind* 编辑named.conf vim /etc/named.conf options { listen-on port { any; }; listen- ...

  9. python学习之re (?P...)通过关键字获取组以及( P=name)

    和其他的RE表达式一样,但是匹配的子串可以通过group的名字 name来获取.即  result.group('name')  (提示,字符串数字都是常量,所以关键字都可以被视为整型(hash结果) ...

  10. .net mvc的“从客户端中检测到有潜在危险的 Request.Form 值”问题解决

    第一种解决方案 : 在控制器调用的方法上添加[ValidateInput(false)] 第二种解决方案 : 在对应的asp.net web页面上加上ValidateRequest="fal ...