首页 新闻 赞助 找找看

我的两个vue.component组件不能同时加载,只留一个可以出来

0
悬赏园豆:20 [已解决问题] 解决于 2017-11-11 22:57
<div class="content">
        <header-bar/>
        <nav-bar/>
    </div>
    <script src="../assets/scripts/base.js"></script>
     <script src="../assets/scripts/index.js"></script>
     <script>
        var vm = new Vue({
            el:".content",
            data:{}
        })
     </script>
Vue.component("header-bar",{
    data:function(){
        return header
    },
    template:'\
            <header>\
                <div class="heading">\
                    <a :href="homeHref" class="logo">\
                        <img :src="logo" :alt="title" />\
                    </a>\
                    <div class="hotphone">\
                        <div class="icon"></div>\
                        <div class="text">\
                            <h2>全国免费加盟热线:</h2>\
                            <h1>{{hotTel}}</h1>\
                        </div>\
                    </div>\
                </div>\
            </header>\
    '
});
Vue.component("nav-bar",{
    data:function(){
        var n = 0;
        if(window.navActive){
            n = window.navActive;
        }
        return {
            navList:navList,
            navActive:n
        }
    },
    template:'\
        <nav>\
            <div class="navbar">\
                <template v-for="(nav,index) in navList">\
                     <a :href="nav.href" class="navmenu" v-html="nav.title"></a>\
                </template>\
            </div>\
        </nav>\
    ',
    mounted:function(){
        $("a.navmenu").eq(this.navActive).addClass("active");
    }
});

单独用哪一个都可以,放一起就只能第一个有效

张泰峰的主页 张泰峰 | 初学一级 | 园豆:20
提问于:2017-11-11 17:50
< >
分享
最佳答案
0

您好,将<header-bar/><nav-bar/>改成<header-bar></header-bar><nav-bar></nav-bar>就可以了.代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue"></script>
    <title>Document</title>
</head>
<body>
        <div class="content">
                <header-bar></header-bar>
                <nav-bar></nav-bar>
            </div>
</body>
<script>
Vue.component("header-bar",{
    data:function(){
        return {
            homeHref:'https://www.cnblogs.com',
            logo:'https://cn.vuejs.org/images/logo.png',
            title:'Vue官网图标',
            hotTel:'实例'
        }
    },
    template:'\
            <header>\
                <div class="heading">\
                    <a :href="homeHref" class="logo">\
                        <img :src="logo" :alt="title" />\
                    </a>\
                    <div class="hotphone">\
                        <div class="icon"></div>\
                        <div class="text">\
                            <h2>全国免费加盟热线:</h2>\
                            <h1>{{hotTel}}</h1>\
                        </div>\
                    </div>\
                </div>\
            </header>\
    '
});
Vue.component("nav-bar",{
    data:function(){
        var n = 0;
        if(window.navActive){
            n = window.navActive;
        }
        return {
            navList:[{href:'https://www.cnblogs.com',title:'博客园'}],
            navActive:n
        }
    },
    template:'\
        <nav>\
            <div class="navbar">\
                <template v-for="(nav,index) in navList">\
                     <a :href="nav.href" class="navmenu" v-html="nav.title"></a>\
                </template>\
            </div>\
        </nav>\
    ',
    mounted:function(){
        $("a.navmenu").eq(this.navActive).addClass("active");
    }
});

    new Vue({
        el: '.content',
    })
</script>

</html>
收获园豆:20
ohyex | 小虾三级 |园豆:1496 | 2017-11-11 21:55

谢谢 就是这样  

张泰峰 | 园豆:20 (初学一级) | 2017-11-11 22:56

就是不知道为什么vue不支持单标签, 用jsx习惯了  

张泰峰 | 园豆:20 (初学一级) | 2017-11-11 22:57

@张泰峰: 同感,我现在正在用react-native做开发,我也在本地看了好久,感觉就是没毛病。然后动手写了一个案例,对比之下才发现这个问题。哈哈.......

ohyex | 园豆:1496 (小虾三级) | 2017-11-11 23:02
其他回答(1)
0

template: '\
<template v-if="flow.pathJudgeType == 0">\
<div class="mui-table-view-cell mui-input-row" v-if="nextHandTmodels.length > 0">\
<label style="width: 100%;">下一环节操作人</label>\
</div>\
</template>\
',

请问模版内容是这样的 这么内容出不来呢, <div>{{flow.pathJudgeType}}</div>就可以

飘雨风 | 园豆:202 (菜鸟二级) | 2018-05-23 10:01
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册