文档章节

使用Vue实现jQuery的切换选中效果

G
 GreatWall2017
发布于 2017/04/28 19:24
字数 427
阅读 291
收藏 0

实际项目中,我们会遇到很多类似的需求,一个列表,需要点击其中一条高亮显示。熟悉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;
	};
}

 

© 著作权归作者所有

共有 人打赏支持
G
粉丝 0
博文 23
码字总数 11916
作品 0
深圳
鼠标移入移出效果 -- jQuery/Vue版

元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接 实现思路 1、根据鼠标的位置定位在元素内出现的方向 2、...

bestvist
06/22
0
0
vue获取input输入框的数据

用惯了jQuery,突然使用vue感觉很不习惯,有很多不同的地方,感觉是两个不同的思想来写前端的代码。jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作。而Vue则是通过...

王子城
06/21
0
0
走进webpack(2)--第三方框架(类库)的引入及抽离

  正文之前,由于这是一个系列的文章,可能第一次看到的看官老爷们会觉得突兀,如果你是webpack新手,我建议你先从前几篇文章看起,如果你对webpack有一些了解,也希望可以在github上下载代...

zaking
03/29
0
0
vue结合bootstrap4.0使用

一般vue都是结合elementui 、mint-ui等使用,但是自己还是想结合bootstrap来使用,在使用的过程中遇到一些报错 使用bootstrap 要结合jQuery来使用的,首先要安装依赖 npm install jquery --s...

杏sunshine
05/16
0
0
vue cli 通过npm引入第三方js(jquery)

默认已经安装好node环境、npm依赖等vue基础环境,如果未运行vue,请参考https://cn.vuejs.org/v2/guide/installation.html#命令行工具-CLI 1.管理员身份运行cmd,进入到项目路径下, 运行 注...

刘昌鑫
2017/10/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

困扰当前数据中心管理的三大难题

导读 当企业发展到一定程度,或者之前的机房不能满足现在的数据中心使用时,企业会对数据中心进行迁移。那么在数据中心进行迁移的时候会遇到哪些风险呢?针对这些风险我们应该做出怎样的措施来...

问题终结者
1分钟前
0
0
设计模式:工厂方法模式(工厂模式)

工厂方法模式才是真正的工厂模式,前面讲到的静态工厂模式实际上不能说是一种真正意义上的设计模式,只是一种变成习惯。 工厂方法的类图: 这里面涉及到四个种类: 1、抽象产品: Product 2、...

京一
17分钟前
0
0
区块链和数据库,技术到底有何区别?

关于数据库和区块链,总会有很多的困惑。区块链其实是一种数据库,因为他是数字账本,并且在区块的数据结构上存储信息。数据库中存储信息的结构被称为表格。但是,区块链是数据库,数据库可不...

HiBlock
25分钟前
0
0
react native 开发碰到的问题

react-navigation v2 问题 问题: static navigationOptions = ({navigation, navigationOptions}) => ({ headerTitle: ( <Text style={{color:"#fff"}}>我的</Text> ), headerRight: ( <View......

罗培海
32分钟前
0
0
Mac Docker安装流程

久仰Docker大名已久,于是今天趁着有空,尝试了一下Docker 先是从docker的官网上下载下来mac版本的docker安装包,安装很简易,就直接拖图标就好了。 https://www.docker.com/products/docker...

writeademo
40分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部