使用Vue实现jQuery的切换选中效果
2017-04-28 00:00
886 查看
实际项目中,我们会遇到很多类似的需求,一个列表,需要点击其中一条高亮显示。熟悉JQuery的同学说这个太简单了。可以给这个选中的element设置一个active的class。配合Css样式,让active有选中高亮效果。但是谁说一定要用到jQuery呢。
最近在做的项目中,我尝试脱离JQuery,绕过JQuery,我所接触的大部分项目中好像不使用JQuery无法进行开发一样。它确实给开发者提供了太多便利。以至于大部分web网站都依赖它运行着。据w3Techs统计,JQuery的市场份额高达94.9%,是时候脱离JQuery的束缚了。使用
选中效果实现的核心实现逻辑是拷贝一份当前状态作为快照。比对列表的快照和当前的唯一索引,如果相同则视为选中。
参考:https://jsfiddle.net/xiaoluoboding/z5xusoL9/
http://xlbd.me/vue-js-selected-highlight/
补充:利用item的index进行判断
最近在做的项目中,我尝试脱离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; }; }
相关文章推荐
- 学习Js(1)-使用Jquery实现滑动切换效果
- 使用jquery实现图文切换效果
- 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
- 使用jquery实现图文切换效果另加特效
- vue2.0使用动态组件实现tab切换效果(vue-cli)
- 使用jQuery.animate实现简单的页面切换效果
- 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
- 使用jquery实现图文切换效果另加特效
- jQuery实现点击单选按钮切换选中状态效果
- 使用js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
- 使用jQuery实现AJAX帐号验证效果
- 使用Jquery,CSS3实现像GooglePlus那样的圆圈效果
- jquery实现标签切换效果
- 使用jQuery来实现菜单文字和图标动画效果
- jQuery实现仿flash大图切换效果(带鼠标感应)
- 使用JQuery实现Edit in place效果的Input框
- jQuery实现切换页面布局使用介绍
- 使用jQuery实现点评星星效果
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- 转:jquery实现tab切换效果及js css ajax推荐