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

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

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

Demo


使用Vue.js实现


javascript

new Vue({
el: "#app",
data: {
gameNames: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄',
'守望先锋'
],
activeName: ''
},
methods: {
selected: function(gameName) {
this.activeName = gameName
}
}
})

html

 
<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>

使用Vue.js实现列表选中效果的更多相关文章

  1. Vue.js的列表数据的同步更新方法

    这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...

  2. Vue.js实现tab切换效果

    利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...

  3. 关于vue.js中列表渲染练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  4. Vuejs实现列表选中效果

    //html <div id="app"> <ul><div>选择你最喜欢的爱好:</div> <li class=" ...

  5. Vue.js根据列表某列值更新filter

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. vue.js对列表进行编辑未保存随时变更

    1.不要建立在同一vm对象下 2.使用深拷贝$.extend(true, vm.model, obj); 3.开新标签页

  7. vue.js循环for(列表渲染)详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  8. Vue.js hello world

    <!DOCTYPE HTML> <html> <head> <title>vue.js hello world</title> <sc ...

  9. 公司内部技术分享之Vue.js和前端工程化

    今天主要的核心话题是Vue.js和前端工程化.我将结合我这两年多的工作学习经历来谈谈这个,主要侧重点是前端工程化,Vue.js侧重点相对前端工程化,比重不是特别大. Vue.js Vue.js和Rea ...

随机推荐

  1. java基础记录(一):开发环境的配置

    一.JDK的安装与环境变量配置 1.jdk下载与安装. jdk1.8.0_192下载地址 下载完成后,双击运行安装文件.可以选择你要安装的位置或者直接下一步,等待安装完成,最后关闭. 2.配置环境变量 ...

  2. BZOJ2915 : [Poi1997] gen

    设f[i][j]表示串ij可以由哪些字母成长过来,用二进制压位表示. 设g[i][j]表示给定串中[i,j]这个区间一开始可以由哪些字母成长多来,用二进制压位表示. 设h[i]表示给定串前i位最少需要 ...

  3. 20172308 实验四《Java面向对象程序设计 》实验报告

    20172308 2017-2018-2 <程序设计与数据结构>实验四报告 课程:<程序设计与数据结构> 班级: 1723 姓名: 周亚杰 学号:20172308 实验教师:王 ...

  4. dotNetSpider 手记

    准备工作: 从github上download工程. 安装VS2017. 安装 .net core 2.0. 编译通过. 基础架构: 调度器 Scheduler 从根site开始,向 Downloade ...

  5. perl解析xml-XML::Simple/XMLin

    转自: http://blog.charlee.li/perl-xml-simple/ [Perl]用XML::Simple解析XML文件 在Perl中解析XML的方法最常见的就是使用 XML::DO ...

  6. DELPHI 常用虚拟键:VK_

    常数名称                          十六进制值          十进制值     对应按键 VK_LBUTTON                       01       ...

  7. DevExpress VCL for Delphi 各版本收集下载

    更多VCL组件请到:http://maxwoods.400gb.com/u/758954/1974711 DevExpress VCL 5.7:http://www.ctdisk.com/file/7 ...

  8. OLE文件拖放

    使用IDropTarget接口同时支持文本和文件拖放 关于Windows的外壳扩展编程,拖放是比较简单的一种,在网上可以找到不少介绍这个技巧的文章.大部分是介绍使用MFC的COleDropTarget ...

  9. Quartz的集群模式和单机模式共存-让一个非集群的Quartz与集群节点并行着运行

    假如你让一个非集群的 Quartz 应用与集群节点并行着运行,设法使用 JobInitializationPlugin和 RAMJobStore Quartz支持可选节点执行jobquartz集群,会 ...

  10. 根据UIScrollView的contentOffset值精确控制动画

    根据UIScrollView的contentOffset值精确控制动画 效果 原理 根据方程精确计算每一个view在位移值x变化的时候的输出值,并根据这个值实现各种逻辑. 源码 https://git ...