使用vue框架手动创建导航栏
来源:互联网 发布:华南师大网络教育 编辑:程序博客网 时间:2024/06/05 08:04
先上效果图
以下是原先的实现代码和思路:
<li @click="checkTabOpt"> < a href="#"> <input id="radio_huiyuanxinxi" type="radio" value="huiyuanxinxi" v-model="titleShow" style="display:none;" > <label for="radio_huiyuanxinxi"><span>基础信息</span></label> </ a></li>
checkTabOpt()方法里做了对于被选中后的样式处理,然后在data中声明titleShow属性,把每个模块对应的代码用一个大div包括住再加<div v-if="titleShow=='huiyuanxinxi'">
的vue绑定。这样就基本实现了根据点击的input标签展现不同的div标签。
但是这里有个问题,可以从上图看到,就是在li标签里面设置一个input标签,每一个li中有很大的内边距。注意只点击这些空白的内边距没有绑定到titleShow的值,造成点击空白div不变但是li被选中,只有点击到字上才能实现真正的功能。
然后做了以下代码改动:
<li @click="checkTabOpt($event,'huiyuanxinxi')""> <a href="#"> <input id="radio_huiyuanxinxi" type="radio" style="display:none;" > <label ><span>基础信息</span></label> </a></li>
改变点击事件,设置一个参数,传入titleShow的值,在checkTabOpt()方法中使用set绑定值。
this.$set("titleShow",title);
这样只要点击到li标签就能改变titleShow的值,传递值也比起前一种方式更加简洁。
博主功力不深,欢迎大家谈论。
阅读全文
0 0
- 使用vue框架手动创建导航栏
- vue-route 导航使用
- 创建VUE项目框架
- Vue--导航栏菜单
- vue使用ElementUI时导航栏默认展开
- 创建VUE项目框架02
- vue框架使用积累
- Layui前端框架导航栏使用介绍
- vue中使用bootstrap框架
- vue前端框架的使用
- 使用Vue-cli创建项目
- 使用vue-cli创建项目
- 使用frame制作导航框架
- 使用dtree构建框架导航
- 创建动态导航(使用SqlSiteMapProvider)
- 深入理解Laravel框架--手动创建laravel框架(1)
- 深入理解Laravel框架--手动创建laravel框架(2)
- 导航栏的创建
- MySQL索引
- IntelliJ IDEA 常用设置讲解
- Xshell5配置ssh免密码登录-公钥与私钥登录linux服务器(xshell如何登陆上阿里云服务器)
- 神操作
- BFPRT算法——在一个无序数组找出前k小的数
- 使用vue框架手动创建导航栏
- 获取本地时间与UTC时间
- essql聚合结果封装处理
- 【Scikit-Learn 中文文档】聚类
- ACdream
- Programming Elastic MapReduce.pdf 英文原版 免费下载
- 五种简单工厂模式
- 机房重构总结2
- 交换机和路由器的区别