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();
},
- vueJs实现二级标题
- 基于vuejs菜单实现
- PPT如何制作一级标题、二级标题
- 一级标题居中,二级标题固定缩进
- 网站二级导航标题特效
- VueJS实现用户管理系统
- vuejs实现iOS弹框 export
- vueJs
- vuejs
- VueJS
- vuejs
- vueJS
- vuejs
- vuejs
- 八小时实现迷你版vuejs之二:vuejs 架构
- vuejs最简单实现 html+js
- 利用vueJs实现图片轮播
- vuejs实现数据驱动视图原理
- servlet国际化
- Python中的迭代
- clone()
- Ubuntu 16.04 标题栏实时显示上下行网速、CPU及内存使用率
- 基础算法之 冒泡排序
- vueJs实现二级标题
- IDEA配置maven(配置阿里云中央仓库)
- 基于C客户端与多个服务器相连
- android Scroller
- sql依赖注入的解决方案
- 图像布局算法
- vue学习04--[转发]Vuejs中computed、methods、watch的区别
- JS-Jquery 常用功能
- POJ-1932 XYZZY(判正权环路+Warlshell传递闭包)