//html
<div id="app">
<ul><div>选择你最喜欢的爱好:</div>
<li class="collection-item"
v-for="gameName in gameNames"
:class="{active: activeName == gameName}"
@click="selected(gameName)">{{gameName}}
</li>
</ul>
</div>
//js
new Vue({
el: "#app",
data: {
gameNames: ['看书', '听歌', '游泳', '健身', '看电影','旅游'],
activeName: ''
},
methods: {
selected: function(gameName) {
this.activeName = gameName
}
}
})
//css样式
.active{
color:red;
}
.collection-item{
border:1px solid #dadada;
padding:10px 2px;
width:98px;
margin-bottom:5px;
text-align:center;
}

在线查看效果

https://jsfiddle.net/fozero/npxo3ryq/1/

Vuejs实现列表选中效果的更多相关文章

  1. 使用Vue.js实现列表选中效果

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

  2. Vue 循环为选中的li列表添加效果

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vu ...

  3. vue2购物车ch4-(筛选v-for 点击的那个设置样式 设为默认地址其他 联动 非循环的列表选中和非选中 删除当前选中的列表)

    1 address.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

  5. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  6. 如何禁用ListView中的选中效果

    有的时候,我们希望ListView没有选中效果. 导致选中效果出现可能有两方面的原因: 1.每一行View自身可能有选中效果,可以将它的背景设置为透明 2.ListView有一个listSelecto ...

  7. 怎样创建TWaver 3D的轮廓选中效果

    在一般的游戏中.物体的选中效果会是这样: TWaver 3D中,物体的默认的选中效果一般都是一个方方正正的外框.在HTML5的Mono版本号中,TWaver提供了轮廓线样式的选中效果. 通过例如以下代 ...

  8. android实现对导航Tab设置下划线选中效果

    技术人员核心竞争力还是技术啊.努力提高各种实现效果.加油哦! 直接看效果.此linearLayout只有两个Button ,当选中Button1,Button1有个下划线选中效果.当选中Buton2, ...

  9. Android利用RecyclerView实现列表倒计时效果

    最近面试时,面试官问了一个列表倒计时效果如何实现,然后脑袋突然懵的了O(∩_∩)O,现在记录一下. 运行效果图 实现思路 实现方法主要有两个: 1.为每个开始倒计时的item启动一个定时器,再做更新i ...

随机推荐

  1. spring boot + mybatis + hikaricp + swagger2 + jasypt

    好久没写博客了记录下写过的东西,别到时候又忘了 文章前提:前面开发项目的时候数据池一直用的阿里的druid,这个数据池吧也不能说它不好,为什么现在想改成hikaricp数据池呢,完全是实用项目需要.d ...

  2. Stern-Brocot Tree

    在<具体数学>4.5中看到了SB-Tree,觉得非常有趣,就去研究了一下. 首先介绍一下Stern-Brocot Tree.Stern-Brocot Tree是一种能将所有的最简分数都表示 ...

  3. Solr管理界面详解

  4. day1-Python入门

    百度云有关文档资料链接 链接:https://pan.baidu.com/s/1pLighnX 密码:j69s

  5. Scheme -- Hierarchical Structures

    Question: produce a deep-reverse procedure that takes a list as argument  and returns as its value t ...

  6. UVA - 10249 The Grand Dinner

    Description Problem D The Grand Dinner Input: standard input Output: standard output Time Limit: 15 ...

  7. JAVA-UML

    UML(UnifiedModelingLanguage)(统一建模语言或标准建模语言) 它是模型化的软件系统开发图形语言 为软件开发所有阶段提供模型化,可视化支持 UM2.2中定义了14中图示 三种常 ...

  8. OVS 总体架构、源码结构及数据流程全面解析

    在前文「从 Bridge 到 OVS」中,我们已经对 OVS 进行了一番探索.本文决定从 OVS 的整体架构到各个组件都进行一个详细的介绍. OVS 架构 OVS 是产品级的虚拟交换机,大量应用在生产 ...

  9. Python编程和 Lua编程的比较

    Python编程和 Lua编程的比较 2016.4.21 定义函数: python: def functionname( parameters ): "函数_文档字符串" func ...

  10. Android打赏功能:支付宝转账

    适用于个人开发者开发的APP中,让用户打赏给作者,实质上进行支付宝转账到指定账号的功能. 一.打开'支付宝'APP ,点击'收款'功能 ,将收款码(二维码)图片保存到手机上(进一步移到电脑上). 二. ...