vue.js 动态组件详解
更新时间:2021年09月14日 09:57:53 作者:猫老板的豆
这篇文章主要介绍了vue.js 动态组件详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
:is 动态组件
使用 v-bind:is=”组件名”,会自动去找匹配的组件名,如果没有,则不显示;
<div id="app"> <test v-bind:is="which_to_show"></test> </div> <script> var demo = new Vue({ el: "#app", data: { which_to_show: "first" }, components: { first: { template: "<div>这里是子组件first</div>" }, second: { template: "<div>这里是子组件second</div>" }, third: { template: "<div>这里是子组件third</div>" } } }); </script>
通过改变 which_to_show 的值就可以动态改变想要加载渲染的组件,如下:
到此这篇关于vue.js 动态组件详解的文章就介绍到这了,更多相关vue.js 动态组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
这篇文章主要介绍了vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-10antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
这篇文章主要介绍了antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08vue.js 使用v-if v-else发现没有执行解决办法
这篇文章主要介绍了vue.js 使用v-if v-else发现没有执行解决办法的相关资料,需要的朋友可以参考下2017-05-05
最新评论