vue2.0实现选项卡导航效果
更新时间：2022年03月02日 17:19:49 作者：ygy211715
这篇文章主要为大家详细介绍了vue2.0实现选项卡导航效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue2.0实现选项卡导航效果的具体代码，供大家参考，具体内容如下
1：背景是一个web端的电商网站，根据点击的导航选项卡呈现不同得种类商品，首先这里说下我的路由结构是导航是一个组件，选项卡的内容又是单独的一个组件。
这是导航组件的内容，这里主要通过v-for循环生成导航，没什么好说的，需要注意的是，这因为选项卡需要知道用户所点击的是哪个模块，所以在数据中有个typeId属性，这里需要把该属性值传给选项卡组件。
<template>
<ul class="nav">
<li v-for="nav in navs" :id="nav.typeId" @click="seeClothes($event)" :class="nav.className">
{{nav.title}}
</li>
</ul>
</header>
</template>
<script>
export default {
data(){
return{
navs:[
{
title:"Home",
path:'/home/second',
typeId:'1',
className:'currLi'
},
{
title:"男装",
path:'/home/second',
typeId:'2'
},
{
title:"女装",
path:'/home/second',
typeId:'3'
},
{
title:"童装",
path:'/home/second',
typeId:'4'
}
]
}
},methods:{
seeClothes(event){
var el=event.currentTarget;
var type=el.getAttribute("id");
var a = [];
var p = el.parentNode.children;
for(var i =0,pl= p.length;i<pl;i++) {
p[i].classList.remove("currLi");
}
event.currentTarget.classList.add("currLi");
this.$router.push({path:'/home/clothesType',query:{type:type}})
}
}
}
</script>这里用到的知识点
1：v-for循环实现导航的生成
2：在函数中如何得到当前点击元素的某个属性值
这里给每个li绑定了点击事件，该元素绑定的id值是我们所需要传给选项卡组件的，所以我们在绑定事件的时候需要在click函数中添加参数，注意看我这里绑定事件的时候是这样写的
<li v-for="nav in navs" :id="nav.typeId" @click="seeClothes($event)" :class="nav.className">
{{nav.title}}
</li>点击事件是这样写的
seeClothes(event){
var el=event.currentTarget;//这样是获取当前点击的元素
var type=el.getAttribute("id");//这样就可以获取当前元素的id属性值
var a = [];//声明一个空数组，用来存放当前点击元素的所有的兄弟元素，用来实现只给当前点击的元素动态加背景色
var p = el.parentNode.children;
for(var i =0,pl= p.length;i<pl;i++) {
p[i].classList.remove("currLi");
}
event.currentTarget.classList.add("currLi");//for循环是实现给当前元素的兄弟元素去除currLi类，实现只有当前点击元素有背景色
this.$router.push({path:'/home/clothesType',query:{type:type}})//点击导航路由跳转，并且通过query对象将type参数传过去
}现在参数传过去了，我们看下选项卡组件是怎么写的
<template>
<div>
<div class="typeBox">
<ul class="closeType">
<li v-for="item in data" style="margin-bottom: 24px;">
<div class="npBox">
<img :src="'../static/img/'+item.img" class="cDetail">
<div class="npInnerBox">
<p class="name" >{{item.name}}</p>
<p class="price">{{item.price}}</p>
<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
<button class="addCart" @click="addCart($event)">加入购物车</button>
<span v-bind:id="item.id" style="display: none;"></span>
</div>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data(){
return{
type:'',
data:'',
num1: 1,
userCart:[],
currentPage4:'',
pageSize:'',
total:''
}
},
methods:{
changeData(){
this.type=this.$route.query.type;
if(this.type=="2"){
this.data=[
{
img:'m1.jpg',
name:'黑白条纹裙',
id:'M1',
price:'100',
},
{
img:'m2.jpg',
name:'水蓝色斑点无袖连衣裙',
id:'M2',
price:'199',
},
{
img:'m3.jpg',
name:'短袖职业套装',
id:'M3',
price:'135',
},
{
img:'m4.jpg',
name:'黑色职业套装',
id:'M4',
price:'288',
},
{
img:'m5.jpg',
name:'格子衬衫',
id:'M5',
price:'155',
},
{
img:'m6.jpg',
name:'女性性感短裙',
id:'M6',
price:'300',
}
];
}else if(this.type=="3"){
this.data=[
{
img:'clothes1.jpg',
name:'黑白条纹裙',
id:'W1',
price:'100',
},
{
img:'clothes2.jpg',
name:'水蓝色斑点无袖连衣裙',
id:'W2',
price:'199',
},
{
img:'clothes3.jpg',
name:'短袖职业套装',
id:'W3',
price:'135',
},
{
img:'clothes4.jpg',
name:'黑色职业套装',
id:'W4',
price:'288',
},
{
img:'clothes5.jpg',
name:'格子衬衫',
id:'W5',
price:'155',
},
{
img:'clothes6.jpg',
name:'女性性感短裙',
id:'W6',
price:'300',
}
];
}else if(this.type=="性感职业装"){
this.data=[
{
img:'clothes1.jpg',
name:'黑白条纹裙',
id:'W1',
price:'100',
},
{
img:'clothes2.jpg',
name:'水蓝色斑点无袖连衣裙',
id:'W2',
price:'199',
},
{
img:'clothes3.jpg',
name:'短袖职业套装',
id:'W3',
price:'135',
},
{
img:'clothes4.jpg',
name:'黑色职业套装',
id:'W4',
price:'288',
},
{
img:'clothes5.jpg',
name:'格子衬衫',
id:'W5',
price:'155',
},
{
img:'clothes6.jpg',
name:'女性性感短裙',
id:'W6',
price:'300',
}
];
}else if(this.type==1){
this.data=[
{
img:'m3.jpg',
name:'黑白条纹裙',
id:'M1',
price:'100',
},
{
img:'m4.jpg',
name:'黑色职业套装',
id:'M4',
price:'288',
},
{
img:'m5.jpg',
name:'格子衬衫',
id:'M5',
price:'155',
},
{
img:'clothes4.jpg',
name:'黑色职业套装',
id:'W4',
price:'288',
},
{
img:'clothes5.jpg',
name:'格子衬衫',
id:'W5',
price:'155',
},
{
img:'clothes6.jpg',
name:'女性性感短裙',
id:'W6',
price:'300',
}
];
}
}
},
created(){
this.changeData()
},
watch:{
"$route": "changeData"
}
}
</script>当时就是这里，给我带来了一些困扰，一开始我是把获取数据的changeData方法写在了mounted钩子函数中，但是这样的后果是只有在首次路由跳转的时候才会起作用，再次点击导航的时候数据不会改变
why？因为mounted是创建组件页面元素挂载以后会走里面的方法~想一下，你再次点击的时候只会路由跳转，并不会重新创建组件，所以~
我在想怎么能每次点击导航路由跳转以后都重新走一次获取数据的changeData方法，我想了想，因为导航点击每次都会进行路由跳转，所以~我可以在watch里监听路由跳转，这样每次点击导航的时候都会触发监听方法，从而会调用changeData方法~~解决了不是~~上面的代码有具体的写法
最后说下如何监听路由
watch:{
"$route": "changeData"
}下篇文章说下watch的具体用法
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue项目打包解决静态资源无法加载和路由加载无效(404)问题
这篇文章主要介绍了vue项目打包，解决静态资源无法加载和路由加载无效(404)问题,静态资源无法使用，那就说明项目打包后，图片和其他静态资源文件相对路径不对,本文给大家介绍的非常详细，需要的朋友跟随小编一起看看吧2023-10-10
本文主要介绍了vue前端导出多级表头的excel表的示例代码,可以使用xlsx库来创建Excel文件,下面就来具体介绍一下,感兴趣的可以了解一下2024-06-06
今天小编就为大家分享一篇在vue中读取本地Json文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue3中使用highlight.js实现代码高亮显示的代码示例
代码高亮是在网页开发中常见的需求之一,它可以使代码在页面上以不同的颜色或样式进行突出显示提高可读性,这篇文章主要介绍了vue3中使用highlight.js实现代码高亮显示的相关资料,需要的朋友可以参考下2025-04-04
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
这篇文章主要给大家介绍了Node.js使用orm2进行update操作时关联字段无法修改的解决方法，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
最近发现很多要求Vue3的技术了,不得不说it技术的更新真的太快了,作为vue2老用户,我们在学习Vue3前应该了解他们的区别以及背后的原因,下面这篇文章主要给大家介绍了关于vue2和vue3区别的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了关于vue data中的this指向问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要为大家详细介绍了vue项目实现按钮可随意移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue mounted组件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要为大家介绍了公共Hooks封装useTableData表格数据实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论