vue实现选中效果
前情提要
好久没有写Vue了,略有生疏,这个东西还是得多用。
下午看到一个需求,选择相册图片作为轮播图显示。接口返回相册列表,用户选一下再扔回去。
直到我看到e.target.className
我就知道这个事情不简单。。
Vue是数据驱动
数据驱动这个是我觉得和jQuery
不一样的地方。jQuery
是点一下,加个class
,移个class
。Vue
是点一下,数据记录,然后自动通知视图。
一个是把选中状态保存在了DOM
,一个是把选中状态保存在了js数据模型
里。
所以在看到了使用Vue
然后获取DOM
改class
的行为,我及时制止了他。话说你都自己搞了,要Vue
干嘛。。。
数据驱动和之前的思想 在一起会怎么样?
数据驱动是一个数据到视图的过程,如果你只改视图不改数据。那么他在其他的地方刷新了数据,就有可能导致视图不同步。比如写的时候写了,那么读的时候读出来的有可能不一样,为什么会这样?因为有两个地方可以改呀,Vue把DOM删了,新渲染的没有你写的状态,读的时候读个鬼。想想,这一个碰运气的东西,能好使吗?
Vue怎么实现这个效果
说了那么多废话,先上地址吧,传送门-我写的DEMO
下面简单说说三种写法的思路
- 选中的id做成一个数组,多维护一个队列。
:class="{selected: ~checkSelect(item.id)}"
渲染的时候去判断数组里面有那个id没有。 - 选中的id做成一个对象,多维护一个对象。
:class="{selected: selectList[item.id]}"
和前一个相比对象的话,id
作为key
查找起来方便了很多。这里要注意的是.$set
,划重点要考的。 - 直接改原对象,多加一个参数。这个不怎么推荐。
在我写完代码,写文章的时候,需求就变了。难受。。。。去改代码。。。。
在我写完代码,写文章的时候,需求就变了。难受。。。。去改代码。。。。
在我写完代码,写文章的时候,需求就变了。难受。。。。去改代码。。。。
vue实现选中效果的更多相关文章
- 使用Vue.js实现列表选中效果
实际项目中,我们会遇到很多类似的需求,一个列表,需要点击其中一条高亮显示.熟悉JQuery的同学说这个太简单了.可以给这个选中的element设置一个active的class.配合Css样式,让ac ...
- 如何禁用ListView中的选中效果
有的时候,我们希望ListView没有选中效果. 导致选中效果出现可能有两方面的原因: 1.每一行View自身可能有选中效果,可以将它的背景设置为透明 2.ListView有一个listSelecto ...
- 怎样创建TWaver 3D的轮廓选中效果
在一般的游戏中.物体的选中效果会是这样: TWaver 3D中,物体的默认的选中效果一般都是一个方方正正的外框.在HTML5的Mono版本号中,TWaver提供了轮廓线样式的选中效果. 通过例如以下代 ...
- android实现对导航Tab设置下划线选中效果
技术人员核心竞争力还是技术啊.努力提高各种实现效果.加油哦! 直接看效果.此linearLayout只有两个Button ,当选中Button1,Button1有个下划线选中效果.当选中Buton2, ...
- 利用this属性实现点击按钮变色.选中效果
浏览器宿主的全局环境中,this指的是window对象. <script type="text/javascript"> console.log(this === wi ...
- 049——VUE中使用animation与transform实现vue的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 如何创建TWaver 3D的轮廓选中效果
在一般的游戏中,物体的选中效果会是这样: TWaver 3D中,物体的默认的选中效果一般都是一个方方正正的外框.在HTML5的Mono版本中,TWaver提供了轮廓线样式的选中效果. 通过如下代码把几 ...
- Windows 10 UWP开发:如何去掉ListView默认的选中效果
原文:Windows 10 UWP开发:如何去掉ListView默认的选中效果 开发UWP的时候,很多人会碰到一个问题,就是ListView在被数据绑定之后经常有个默认选中的效果,就像这样: 而且它不 ...
- uwp,GridView、ListView取消选中效果
在SelectionChanged事件中,添加两行代码,取消点击Item后的选中效果 void GridViewSelectionChanged(object sender, SelectionCha ...
随机推荐
- 108)PHP分页显示
一个代码页的链接:https://www.cnblogs.com/mmykdbc/p/6688460.html 首先一个简单的代码展示: 目录关系: 数据库表格展示: 结果展示: 然后 代码展示 ...
- Descriptive Measures for Populations|Parameter|Statistic|standardized variable|z-score
3.4 Descriptive Measures for Populations; Use of Samples For a particular variable on a particular p ...
- log4j2.xml 配置
动态生成日志, 日志路径: log4j2.xml 配置如下: <?xml version="1.0" encoding="UTF-8"?> < ...
- 常见的Java不规范代码
1.格式化源代码 Ctrl + Shift + F – 格式化源代码. Ctrl + Shift + O – 管理import语句并移除未使用的语句 除了手动执行这两个功能外,你还可以让Eclipse ...
- android适配全机型悬浮框、视频APP项目、手势操作、Kotlin妹子App、相机图片处理等源码
Android精选源码 图片滤镜处理,相机滤镜实时处理,相机拍照录制 android仿爱壁纸App更换壁纸效果源码 基于Kotlin+MVP+Retrofit+RxJava+Glide 等架构实现短视 ...
- PostgreSQL与mysql的比较
特性 MySQL PostgreSQL 实例 通过执行 MySQL 命令(mysqld)启动实例.一个实例可以管理一个或多个数据库.一台服务器可以运行多个 mysqld 实例.一个实例管理器可以监视 ...
- fscanf使用心得
好久没碰C语言了.从现在开始,要开始刷题了. (1)int fscanf( FILE* stream, const char* format, ... ); https://www.programiz ...
- python中字母与ASCII码之间的转换以及进制间的转换
字母与ascii码: ord(c):参数是长度为1的字符串,简称字符.当参数为统一对象时(unicode object),返回能代表该字符的统一编码,当参数为8比特的字符串时,返回该字节的值.例如,o ...
- C语言数据转换
1.在我们编码的时候可能一个表达式中的数字类型是不同的,所以我们的首要的工作就是要把它们转换成相同的类型,然后在进行计算.这个转换的过程就就做隐式类型转换,完全由计算机完成. 2.隐式类型转换有一定的 ...
- 吴裕雄--天生自然Android开发学习:android 背景相关与系统架构分析
1.Android背景与当前的状况 Android系统是由Andy Rubin创建的,后来被Google收购了:最早的版本是:Android 1.1版本 而现在最新的版本是今年5.28,Google ...