我的两个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");
}
});
单独用哪一个都可以，放一起就只能第一个有效
最佳答案
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
谢谢 就是这样
就是不知道为什么vue不支持单标签， 用jsx习惯了
@张泰峰: 同感,我现在正在用react-native做开发,我也在本地看了好久,感觉就是没毛病。然后动手写了一个案例,对比之下才发现这个问题。哈哈.......
其他回答(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>就可以
