vue实现选中效果
更新时间：2020年10月07日 08:57:06 作者：linong
本文给大家分享的是如何使用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选中效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了jenkins自动构建发布vue项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要给大家介绍了关于vue跳转页面常用的4种方法与区别,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了简单了解vue中父子组件如何相互传递值（基础向）,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了Vue插值、表达式、分隔符、指令的相关知识，文中给大家提到了去除vue插值表达式{{}}的方法,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了vue 在methods中调用mounted的实现操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
下面小编就为大家分享一篇Vue2.0 给Tab标签页和页面切换过渡添加样式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
今天小编就为大家分享一篇vue keep-alive 动态删除组件缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue中的computed 和 vm.$data 原理，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了在Vue中创建可重用的 Transition,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
这篇文章主要介绍了vue常用高阶函数及综合案例，文章内容讲解的很清晰，有对于这方面感兴趣的同学可以研究下2021-02-02
最新评论