使用Vue实现jQuery的切换选中效果
使用Vue实现jQuery的切换选中效果
GreatWall2017 发表于7个月前
使用Vue实现jQuery的切换选中效果
  • 发表于 7个月前
  • 阅读 28
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

实际项目中,我们会遇到很多类似的需求,一个列表,需要点击其中一条高亮显示。熟悉JQuery的同学说这个太简单了。可以给这个选中的element设置一个active的class。配合Css样式,让active有选中高亮效果。但是谁说一定要用到jQuery呢。

  最近在做的项目中,我尝试脱离JQuery,绕过JQuery,我所接触的大部分项目中好像不使用JQuery无法进行开发一样。它确实给开发者提供了太多便利。以至于大部分web网站都依赖它运行着。据w3Techs统计,JQuery的市场份额高达94.9%,是时候脱离JQuery的束缚了。使用Vue.js更简洁,快速地实现。

  选中效果实现的核心实现逻辑是拷贝一份当前状态作为快照。比对列表的快照当前的唯一索引,如果相同则视为选中。

<div id="app">
  <div class="collection">
    <a href="#!" class="collection-item"
       v-for="gameName in gameNames"
       @click="selected(gameName)"
       :class="{active: activeName == gameName}">{{gameName}}</a>
  </div>
</div>
new Vue({
  el: "#app",
  data: {
    gameNames: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄',
      '守望先锋'
    ],
    activeName: ''
  },
  methods: {
    selected: function(gameName) {
      this.activeName = gameName
    }
  }
})
<style> 
    .active { color: #f00;}
</style>  

参考:https://jsfiddle.net/xiaoluoboding/z5xusoL9/

          http://xlbd.me/vue-js-selected-highlight/

 

补充:利用item的index进行判断

<div class="btn-group TP_time_btnBox" role="group">
    <template v-for="(item,index) in topoTime.data">
        <button type="button" class="btn btn-default" @click="switchTab(item,index)" :class="{active3: topoTime.activeIndex == index}">{{item.name}}</button>
    </template>
</div>
.active3{
    background: #35bcff!important;
    color:#fff!important;
    border:1px solid transparent!important;
}
"topoTimeTemp":{
	"activeIndex":0,
	"data":[
		{"name":"现网"},
		{"name":"2017--12"},
		{"name":"2018--12"},
		{"name":"2019--12"}
	]
}
data:{
	topoTime:{}
}

this.$http.get("scripts/e2e_data.json").then(function(res){
	    this.topoTime = res.data.result.topoTimeTemp;
					
	}).catch(function(res){
		console.log(res);
	});

switchTab:function(item,index){
	if(this.slideBarSwitch.activeIndex != index){
		this.slideBarSwitch.activeIndex = index;
	};
}

 

共有 人打赏支持
粉丝 0
博文 22
码字总数 10972
×
GreatWall2017
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: