Vuejs实现列表选中效果
//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实现列表选中效果的更多相关文章
- 使用Vue.js实现列表选中效果
实际项目中,我们会遇到很多类似的需求,一个列表,需要点击其中一条高亮显示.熟悉JQuery的同学说这个太简单了.可以给这个选中的element设置一个active的class.配合Css样式,让ac ...
- Vue 循环为选中的li列表添加效果
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vu ...
- vue2购物车ch4-(筛选v-for 点击的那个设置样式 设为默认地址其他 联动 非循环的列表选中和非选中 删除当前选中的列表)
1 address.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- jQuery演示10种不同的切换图片列表动画效果
经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...
- 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 ...
- 如何禁用ListView中的选中效果
有的时候,我们希望ListView没有选中效果. 导致选中效果出现可能有两方面的原因: 1.每一行View自身可能有选中效果,可以将它的背景设置为透明 2.ListView有一个listSelecto ...
- 怎样创建TWaver 3D的轮廓选中效果
在一般的游戏中.物体的选中效果会是这样: TWaver 3D中,物体的默认的选中效果一般都是一个方方正正的外框.在HTML5的Mono版本号中,TWaver提供了轮廓线样式的选中效果. 通过例如以下代 ...
- android实现对导航Tab设置下划线选中效果
技术人员核心竞争力还是技术啊.努力提高各种实现效果.加油哦! 直接看效果.此linearLayout只有两个Button ,当选中Button1,Button1有个下划线选中效果.当选中Buton2, ...
- Android利用RecyclerView实现列表倒计时效果
最近面试时,面试官问了一个列表倒计时效果如何实现,然后脑袋突然懵的了O(∩_∩)O,现在记录一下. 运行效果图 实现思路 实现方法主要有两个: 1.为每个开始倒计时的item启动一个定时器,再做更新i ...
随机推荐
- Linux下实现CAD数据的导出
近期公司项目涉及到CAD的导出,而且部署服务器申请不到Windows下的,所以技术上的解决方案就是寻求如何在Linux下实现CAD数据的导出. 于是百度了一下,找了几个相关库和软件. 1.dxflib ...
- 关于Unicode,字符集,字符编码
基本概念 字符[character] 字符代表了字母表中的字符,标点符号和其他的一些符号.在计算机中,文本是由字符组成的. 字符集合[character set] 由一套用于特定用途的字符组成,例如支 ...
- LintCode-落单的数 III
给出2*n + 2个的数字.除当中两个数字之外其它每一个数字均出现两次,找到这两个数字. 您在真实的面试中是否遇到过这个题? Yes 例子 给出 [1,2,2,3,4,4,5,3].返回 1和5 挑战 ...
- Can't update: no tracked branch No tracked branch configured for branch dev.
1.git pull 命令出现以下错误 $ git pull There is no tracking information for the current branch. Please speci ...
- Google Chrome谷歌/火狐/Safari浏览器开发者工具基本使用教程
前言 在阅读下面内容之前,那么些简单的了解浏览器开发者工具到底是什么东西,到底有什么用途. 浏览器开发者工具到底是什么? 其实简单的说,浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具, ...
- iOS UI特效
1.iOS特效 a.对应APP中的基本动作分三类: 1.指向性动效(滑动,弹出等) 2.提示性动效(滑动删除,下拉刷新等) 3.空间扩展(翻动,放大等) b.这类动效在设计过程中需要主意几点: 1.系 ...
- iOS cocos2d游戏引擎的了解之一
ios游戏引擎之Cocos2d(一) cocos2d是一个免费开源的ios游戏开发引擎,并且完全采用object-c进行编写,这对于已经用惯object-c进行ios应用开发的童鞋来说非常容易上手.这 ...
- 每周.NET前沿技术文章摘要(2017-06-07)
汇总国外.NET社区相关文章,覆盖.NET ,ASP.NET等内容: .NET .NET Core and .NET Framework Working Together, Or: The Magic ...
- Kotlin——最详细的数据类、密封类详解
在前面几个章节章节中,详细的讲解了Koltin中的接口类(Interface).枚举类(Enmu),还不甚了解的可以查看我的上一篇文章Kotlin--接口类.枚举类详解.当然,在Koltin中,除了接 ...
- StringUtils工具类常用方法
前言:工作中看到项目组里的大牛写代码大量的用到了StringUtils工具类来做字符串的操作,便学习整理了一下,方便查阅. isEmpty(String str) 是否为空,空格字符为false is ...