【18】vue.js — 动态组件

来源：互联网发布：java web完整项目编辑：程序博客网时间：2024/06/07 02:31

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/vue.js" ></script>    </head>    <body>        <div id="box">            <input type="button" @click="a='aaa'" value="aaa组件" />            <input type="button" @click="a='bbb'" value="bbb组件" />            <component :is="a"></component>        </div>    </body>    <script>        var vm = new Vue({            el: '#box',            data: {                a: 'aaa'            },            components: {                'aaa': {                    template: '<h2>我是aaa组件</h2>'                },                'bbb': {                    template: '<h2>我是bbb组件</h2>'                }            }        });    </script></html>

上述代码，我们可以通过两个按钮的点击来控制要显示哪个组件。

vue动态组件

阅读全文

0 0