vue.js实现选项卡切换
因为前端课要交一个大作业,刚好工作室的项目需要一个后台管理界面,就自学了一下vue,今天做了一个选项卡切换,最开始的作为菜鸡是用的js做的,太难了T.T,后面学了bootstrap就直接用的组件。今天用了感觉太棒了!比bootstrap的组件好用!!!
一、实现原理
我是用的点击事件进行更改data数据的值,v-if指令根据数据的变化来显示/隐藏内容的
1、设置1个content数组,用来存储6个选项内容是否显示的boolean值,默认第一个显示
new Vue({ el:".body", data:{ a:123, content:[true,false,false,false,false,false] } }
2、在选项内容中使用v-if指令
<div class="main-content h-100"> <div v-show="content[0]" class="h-100 bg-warning" id="item-user"> 用户中心 <div v-show="content[1]" class="h-100" id=""> 内容管理 </div> <div v-show="content[2]" class="h-100" id=""> 消息推送 </div> <div v-show="content[3]" class="h-100" id=""> 数据统计 </div> <div v-show="content[4]" class="h-100" id=""> 运营 </div> <div v-show="content[5]" class="h-100" id=""> 后台管理账户,权限 </div> </div>
3、在methods中写一个点击事件,根据事件的参数,把相应位置的content值为true,其他置为false
这里遇到一个错误,直接赋值会无效,因为data中的数组不能够通过下标直接更改数组中的数据,要通过this.$set(this.arr,index,newVal);方法来设置,或者直接赋值新数组
new Vue({ el:".body", data:{ a:123, content:[true,false,false,false,false,false] }, methods:{ switchItem:function (item) { console.log(item) for (let i = 0; i <6; i++) { if(i==item){ this.$set(this.content,i,true); } else{ this.$set(this.content,i,false); } } } } })
4、选项绑定点击事件
<ul class="list-unstyled left-ul"> <li class="bg-warning nav-item"><a @click="switchItem (0)" href="#person">用户中心</a></li> <li class="bg-info "><a @click="switchItem (1)" href="#content">内容管理</a></li> <li class="bg-dark "><a @click="switchItem (2)" href="#notification">消息推送</a></li> <li class="bg-success "><a @click="switchItem (3)" href="#data">数据统计</a></li> <li class="bg-warning "><a @click="switchItem (4)" href="#operate">运营</a></li> <li class="bg-info"><a @click="switchItem (5)" href="#system">系统设置</a></li> </ul>
二、实现效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)