zoukankan html css js c++ java

vue动态加载不同的组件（分内部和外部组件）

<!DOCTYPE html>
<html>

<head>
    <title> hello world vue </title>
    <meta charset="utf-8" />
</head>

<body>
    <div id="app" v-cloak>
        <!-- 缺省挂载 currentView 变量指定的组件 -->
        <component :is="currentView"></component>
        <button @click="handleChangeView('A')">A</button>
        <button @click="handleChangeView('B')">B</button>
        <button @click="handleChangeView('C')">C</button>
        <button @click="handleChangeViewHome()">Home</button>
    </div>
</body>

</html>

<script src="jquery-3.1.1.js"></script>
<script src="vue.js"></script>


<script>
    $(document).ready(function() {

    });
</script>


<script>
    Vue.component('Home', {
        template: '<div> 外部组件 </div>',
        props: {},
        data: function() {
            return {}
        },
        methods: {}
    });

    var app = new Vue({
        el: '#app',
        data: {
            currentView: 'comA'
        },
        computed: {},
        methods: {
            handleChangeView: function(x) {
                this.currentView = 'com' + x;
            },
            handleChangeViewHome: function() {
                this.currentView = 'Home';
            }
        },
        components: {
            comA: {
                template: '<div>组件A</div>'
            },
            comB: {
                template: '<div>组件B</div>'
            },
            comC: {
                template: '<div>组件C</div>'
            }
        },
        mounted: function() {}
    });
</script>

查看全文

相关阅读:
ps太卡
 vba 数字变为excel对应列的字母
 爬去网页离线数据
 vba 得到数字
 Sql Server generate table structure document
Git
windows凭据管理器
 修改注册表
 Software List
1009 说反话

原文地址：https://www.cnblogs.com/qqhfeng/p/11481967.html