<!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. 原生JS实现简易评论更新功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 提取 linux 文件目录结构

    提取 linux  文件的目录结构 find /home/user1/ -type d |while read line ;do mkdir -p /home/user2/$line;done

  3. JSON字符串与Map互转

    //一.map转为json字符串 public static String map2jsonstr(Map<String,?> map){ return JSONObject.toJSON ...

  4. T-SQL实用查询之查询字段所属的数据库表

    SELECT b.name as TableName,a.name as columnname From syscolumns a INNER JOIN sysobjects b ON a.id=b. ...

  5. Django 框架初步了解

    Django框架初探 1.web框架介绍 本质 socket 服务端 : 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.建立网络通信连接至少要一对端口号(s ...

  6. emos邮件系统的web密码修改方法

     作者:邓聪聪 1.修改web管理界面的登陆密码,数据库修改管理员密码,有root用root,没root用系统用户.查看方法 进入数据库查看到管理表项中的root管理账户信息, mysql> u ...

  7. nginx Access-Control-Allow-Origin 多域名跨域设置

    2019-1-16 12:24:15 星期三 网站的静态文件(js, css, 图片, 字体等)是在一个单独的域名下的, 为了防止非法访问, 给nginx添加了跨域的控制, 也可以在PHP代码中添加 ...

  8. CentOS 安装 Docker

    前言:其实安装步骤Docker官网很详细,如果有些人英文不好看的比较慢的话就可以直接看我的,我也是摘自官网,具体步骤如下 1. 安装依赖包 $ sudo yum install -y yum-util ...

  9. Charles使用心得总结

    一.下载/安装/配置 1.1下载并安装Charles. mac版和window版都有,下载可以去Charles官网(http://www.charlesproxy.com/download/),下载下 ...

  10. 《剑指offer》数字在排序数组中出现的次数

    本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结: