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
上一篇localStroage 与sessionStroage使用
下一篇js对象的使用
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭