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 相关文章推荐
JavaScript OOP类与继承
Nov 15 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
vue中如何使用ztree
Feb 06 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
vue仿ios列表左划删除
Sep 26 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
使用Apache的rewrite技术
2006/06/22 PHP
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
Python中str.format()详解
2017/03/12 Python
python字符串与url编码的转换实例
2018/05/10 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
python实现弹窗祝福效果
2019/04/07 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
创意活动策划书
2014/01/15 职场文书
军训感想500字
2014/02/20 职场文书
服务标语口号
2014/07/01 职场文书
群众路线调研报告范文
2014/11/03 职场文书
教师先进个人材料
2014/12/17 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书