vue动态切换组件
2024-03-30 07:58:46
<!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>
最新文章
- 详解css中的position属性
- Kindle 实用技巧
- Java中浮点数能连续精确表示整数的范围
- ios专题 － 常用设计模式
- 自己去看dubbo源码
- 表单数据校检方法 onsubmit()的使用？
- 实用的VIM配置文件
- c++的string容器
- PAT (Advanced Level) 1055. The World's Richest (25)
- 使用STM8SF103 ADC采样电压（转）
- Spring mvc 数据验证
- poj3417
- linux（十四）之linux NFS服务管理
- iOS NSString 文本不同的颜色 标题+文本字体大小 行间距／删除不需要的字符 ／以及自适应高度
- MyDAL - like && not like 条件 使用
- css修改原生radio样式
- 微信小程序如何自动弹出提示微信授权?
- matlab调用规则变量名eval函数
- java 从零开始，学习笔记之基础入门<集合>（十六）
- Linux常用命令 查找文件