动态地绑定到它的 is 特性，可以实现动态组件
2024-08-29 00:56:49
前面的话
让多个组件使用同一个挂载点，并动态切换，这就是动态组件。本文将详细介绍Vue动态组件
概述
通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，可以实现动态组件
<div id="example">
<button @click="change">切换页面</button>
<component :is="currentView"></component>
</div>
<script>
var home = {template:‘<div>我是主页</div>‘};
var post = {template:‘<div>我是提交页</div>‘};
var archive = {template:‘<div>我是存档页</div>‘};
new Vue({
el: ‘#example‘,
components: {
home,
post,
archive,
},
data:{
index:0,
arr:[‘home‘,‘post‘,‘archive‘],
},
computed:{
currentView(){
return this.arr[this.index];
}
},
methods:{
change(){
this.index = (++this.index)%3;
}
}
})
</script>
也可以直接绑定到组件对象上
<div id="example">
<button @click="change">切换页面</button>
<component :is="currentView"></component>
</div>
<script>
new Vue({
el: ‘#example‘,
data:{
index:0,
arr:[
{template:`<div>我是主页</div>`},
{template:`<div>我是提交页</div>`},
{template:`<div>我是存档页</div>`}
],
},
computed:{
currentView(){
return this.arr[this.index];
}
},
methods:{
change(){
this.index = (++this.index)%3;
}
}
})
</script>
最新文章
- node.js 的事件驱动
- C# Winform程序把引用的dll放到指定目录
- centos分区
- [转]ubuntu 14.04 系统设置不见了
- Hibernate中查询数据转成VO对象及注意问题
- c++ 读写锁
- ASP.NET MVC(二) 理解MVC
- 容联手机接口封装到ThinkPHP3.2.菜鸟图文教学
- 串口调试工具(Python2.7+pyserial+Tkinter)
- 微信小程序Server端环境配置
- MXNet之ps-lite及parameter server原理
- elasticsearch安装ik分词器
- [Swift]LeetCode617. 合并二叉树 | Merge Two Binary Trees
- MAVEN项目不扫描mybatis的mapper.xml问题
- 2018-2019-2 网络对抗技术 20165304 Exp4 恶意代码分析
- Pycharm配置anaconda环境
- 11 The superlative
- 练习：javascript弹出框及地址选择功能,可拖拽
- IntelliJ IDEA插件 - ApiDebugger
- HTML 代码复用实践