2021 - 前端切换Tab的实现 - 标签上自定义属性的获取方法(data-type)

最新推荐文章于 2024-01-07 08:08:27 发布

酷酷的Nian

最新推荐文章于 2024-01-07 08:08:27 发布

阅读量854

点赞数 1

分类专栏： vue javascript 文章标签： js

本文链接：https://blog.csdn.net/weixin_43906597/article/details/116919427

版权

javascript 同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

实现1、

<div>
	 <button :class="[num == 1 ? 'active':'']" @click="num = 1">按钮1</button>
	 <button :class="[num == 2 ? 'active':'']" @click="num = 2">按钮2</button>
</div>

实现2、

<div>
  	 <button id="a" data-type="a" :class="[num == 1 ? 'active':'']" @click="handleClick">按钮1</button>
  	 <button id="b" data-type="b" :class="[num == 2 ? 'active':'']" @click="handleClick">按钮2</button>
</div>

	  handleClick(e){
		  if(e.currentTarget.dataset.type == 'a'){
			  this.num = 1
		  }else if(e.currentTarget.dataset.type == 'b'){
		      this.num = 2
		  }
          // 或者
          if(e.target.id == 'a'){
			  this.num = 1
		  }else if(e.target.id == 'b'){
		      this.num = 2
		  } 
	  }

3、标签上自定义属性的获取方法(data-type)

<div data-type="name" ref="hello" @click="handleClick">点我</div>
// 直接获取
this.$refs.name.getAttribute('data-type')
// 事件获取
handleClick(e){
    console.log(e.currentTarget.dataset.type)
}