vueJs实现二级标题

来源:互联网 发布:四声母域名 club 编辑:程序博客网 时间:2024/06/08 12:04

<JSP>

//一级

<div v-for="(dir, index) in dirlist" class="bootstrap-panel bootstrap-panel-default panel-default-nav">
         <div class="bootstrap-panel-heading panel-nav-heading">
             <h5 class="bootstrap-panel-title oceansdata-panel-title" data-toggle="collapse" data-parent="#"v-bind:href="'#collapse_' + dir.id">
                         <span>{{dir.name}}</span></h5>
                
   </div>

//二级

        <div v-bind:id="'collapse_' + dir.id" class="panel-collapse collapse nav-search">
                                            <div class="bootstrap-panel-body classify-nav-news">
                                                <div class="bootstrap-panel-body classify-nav-news">
                                                <ul class=" nav nav-tabs personalcon-name">
                                                    <li class="pertitle" v-for="(dic, index2) in dicmap[dir.id]">
                                                        <a href="#" data-toggle="tab"><span>{{ dic.ejmc}}</span></a>
                                                    </li>
                                                </ul>
                                            </div>
                                            </div>
                                        </div>
                                    </div

<JS>

$(function() {
var url_data_dir_id = getUrlParam('data_dir_id');//一级专题
var url_data_dic_id = getUrlParam('data_dic_id');//二级专题

var pVue = new Vue({
el: '#',
data: {
dirlist: {},//一级专题
dicmap: {},//二级专题
initObj: {}//选中的二级专题
},
methods: { 
showDirectoryList: function() {//加载专题目录
$.ajax({
type : 'POST',
url : '',
dataType : 'json',
data: {},
success : function(data) {
pVue.dirlist = data.dir;
pVue.dicmap = data.dic;
pVue.initSelect(data);
},
});
},
initSelect: function(data) {//初始化选中
if(data.dir && data.dir.length > 0) {
for(var key in data.dic) {
if(!url_data_dir_id && key == data.dir[0].id && data.dic[key].length > 0) {
console.log('加载第一个');
this.initObj = data.dic[key][0];
break;
}else if(!!url_data_dir_id && url_data_dir_id == key && data.dic[key].length > 0 ){
if(url_data_dic_id) {
for(var k = 0; k < data.dic[key].length; k++) {
if(url_data_dic_id == data.dic[key][k].ztid) {
console.log('加载指定目录下的指定产品');
this.initObj = data.dic[key][k];
break;
}
}
}else {
console.log('加载指定目录下的第一个');
this.initObj = data.dic[key][0];
break;
}


}
}
}
console.log(this.initObj);
},
initLeftCss: function() {// 初始化DOM
$(document).click(
function(e) {
var target = $(e.target);
if (target.closest(".topmenu").length == 0
&& target.closest(".submenu").length == 0) {
$(".topmenu > li").removeClass("lihover");
}
});
},

},

mounted: function() {//模版加载完毕后调用
this.showDirectoryList();
},