<!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. jQuery禁用、开启鼠标滚轮事件

    1.禁用鼠标滚轮事件 $(document).bind('mousewheel', function(event, delta) {return false;}); 2.开启鼠标滚轮事件,直接解绑事件 ...

  2. JAVA进阶19

    1.冒泡排序 package cn.zh.abstrac; import java.util.Arrays; //冒泡排序 public class Demo019 { public static v ...

  3. 关于URL隐藏index.php方法

    在phpstudy上修改了php版本5.6以上后,tp5框架原URL重写模式发生变化.需要在public目录下的.htaccess作出如图修改,原理未知.

  4. npm 如何安装npm包

    1.每个插件或者组件都会在官方网站有教程. 以https://v4.bootcss.com 为例 2.vuetify的 3.moment 的库

  5. codeforces 1151 B

    codeforces 1151  B codeforces 1151  B  1600fen 题意:n*m的矩阵,问能否从n行中每行选一个数 异或 大于0 解析:刚开始看没思路,想用dfs跑一遍,看到 ...

  6. eval()和$.parseJSON()注意事项

    在前后端分离大行其道XXX(巴拉巴拉的废话不多讲了).描述实际应用场景:后台组装数据,返回到前台调用. 刚开始没有注意“后台返回字符串_1”的形式,使用eval()处理. 只是返回了字符串,不是严格意 ...

  7. sublime text3输出窗口中文显示乱码问题解决方案

    1 前言 略 2 方案 修改Python3.sublime-build内容为 { "cmd": ["C:/Users/Administrator/AppData/Loca ...

  8. idea的一些设置

    在File->Settings->Appearance & Behavior->System Settings->Updates下取消Automatically che ...

  9. 常用函数php

    //随机数 /** * @param int $length 随机数长度 * @param string $num 是否只包含数字 * @return null|string 返回随机字符串 */ f ...

  10. Java中三种代理模式

    代理模式 代理(Proxy)是一种设计模式,提供了间接对目标对象进行访问的方式;即通过代理对象访问目标对象.这样做的好处是:可以在目标对象实现的功能上,增加额外的功能补充,即扩展目标对象的功能. 这就 ...