vue实现选中效果


Posted in Javascript onOctober 07, 2020

前情提要

好久没有写Vue了,略有生疏,这个东西还是得多用。

下午看到一个需求,选择相册图片作为轮播图显示。接口返回相册列表,用户选一下再扔回去。

直到我看到e.target.className我就知道这个事情不简单。。

Vue是数据驱动

数据驱动这个是我觉得和jQuery不一样的地方。

jQuery是点一下,加个class,移个class。

Vue是点一下,数据记录,然后自动通知视图。

一个是把选中状态保存在了DOM,一个是把选中状态保存在了js数据模型里。

所以在看到了使用Vue然后获取DOM改class的行为,我及时制止了他。话说你都自己搞了,要Vue干嘛。。。

数据驱动和之前的思想 在一起会怎么样?

数据驱动是一个数据到视图的过程,如果你只改视图不改数据。那么他在其他的地方刷新了数据,就有可能导致视图不同步。比如写的时候写了,那么读的时候读出来的有可能不一样,为什么会这样?因为有两个地方可以改呀,Vue把DOM删了,新渲染的没有你写的状态,读的时候读个鬼。想想,这一个碰运气的东西,能好使吗?

Vue怎么实现这个效果

说了那么多废话,先上地址吧,传送门-我写的DEMO 【具体代码都在这里】

下面简单说说三种写法的思路

  1. 选中的id做成一个数组,多维护一个队列。:class="{selected: ~checkSelect(item.id)}"渲染的时候去判断数组里面有那个id没有。
  2. 选中的id做成一个对象,多维护一个对象。:class="{selected: selectList[item.id]}"和前一个相比对象的话,id作为key查找起来方便了很多。这里要注意的是.$set,划重点要考的。
  3. 直接改原对象,多加一个参数。这个不怎么推荐。

到此这篇关于vue实现选中效果的文章就介绍到这了,更多相关vue选中效果内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
js获取系统的根路径实现介绍
Sep 08 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
electron踩坑之dialog中的callback解决
Oct 06 #Javascript
electron踩坑之remote of undefined的解决
Oct 06 #Javascript
9个JavaScript日常开发小技巧
Oct 06 #Javascript
详解ES6中class的实现原理
Oct 03 #Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 #Javascript
vue 虚拟DOM的原理
Oct 03 #Javascript
vue使用video插件vue-video-player的示例
Oct 03 #Javascript
You might like
PHP6 先修班 JSON实例代码
2008/08/23 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
php图像处理类实例
2015/07/28 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
web.py中调用文件夹内模板的方法
2014/08/26 Python
Python 数据结构之队列的实现
2017/01/22 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
python多进程重复加载的解决方式
2019/12/13 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
简单了解Django项目应用创建过程
2020/07/06 Python
python把一个字符串切开的实例方法
2020/09/27 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
同事打架检讨书
2014/02/04 职场文书
竞争上岗实施方案
2014/03/21 职场文书
网络营销策划方案
2014/06/04 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL
sql字段解析器的实现示例
2021/06/23 SQL Server