一点PHP博客分享关于浙江衢州网站建设前端框架vue中的动态组件模块，动态组件顾名思义就是可以根据不同的条件场景，进行变化的组件，结合下面代码案例理解。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<body> <div id="a"> <button @click="change">{{ cur }}</button> <component :is="cur"></component> </div> <template id="b"> <p>bbb</p> </template> </body> <script> new Vue({ el: '#a', data: { cur: {// 直接绑定到组件对象上 template: '<p>aaa</p>' } }, methods: { change: function() { this.cur = this.cur=='myB'?'myC':'myB'; } }, components: {// 多个组件使用同一挂载点，动态切换 'myB': { template: '#b' }, 'myC': { template: '<p>ccc</p>' } } }); </script> |
上面代码通过用户简单的点击事件触发change方法，然后判断当前的模板数据从而进行选择切换。
一点PHP，每天一点技术分享。
2018年4月25日 下午5:35 沙发
恩，不错
2018年4月25日 下午5:38 1层
@小哈哈 有用就好，常来哦