发表于： 2019-12-23 10:27:49
1 1192
今天完成的事情：
实现了手风琴的效果下面是代码：
<template>
<nav class="col-12 col-md-5 col-lg-3 d-flex flex-column">
<ul class="w-100" v-for="(items,index) in navDate">
<li @click='navclick(index)' class="w-100 text-white p-3 d-flex flex-row justify-content-between align-items-center">
<span>{{items.name}}</span>
<div class="el"></div>
</li>
<ul v-show="items.show">
<li class="w-100 text-white p-3 rounded" v-for='(lis,index) in items.list'>{{lis}}</li>
</ul>
</ul>
</nav>
</template>
<script>
export default {
name: 'Nav',
data() {
return {
navDate:[
{
name:'欢迎页',
list:[],
show:false
},
{
name:'信息管理',
list:['公司信息','职位信息'],
show:false
},
{
name:'内容管理',
list:['Article管理'],
show:false
},
{
name:'后台管理',
list:['账号管理','角色管理','修改密码','模块管理'],
show:false
}
]
}
},
methods: {
navclick(index) {
this.navDate.forEach(i => { //做一个遍历，如果遍历的所有对象的show值不等于当前点击的那个对象的show值则为false
if(i.show !== this.navDate[index].show) {
i.show = false
}
})
this.navDate[index].show = !this.navDate[index].show
}
},
}
</script>
明天要做的事情：
学习怎么把vue项目部署到远程服务器上去，并通过域名访问
返回列表
评论