您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax |

vue.js 动态组件详解

51自学网 2022-05-02 21:31:37
  javascript

: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 动态组件内容请搜索wanshiok.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持wanshiok.com!


React+Typescript实现倒计时Hook的方法
React全局状态管理的三种底层机制探究
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1