【18】vue.js — 動態元件

有心部落格發表於2017-09-08
Vue.js元件
<!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動態元件

相關文章