vue如何实现选中效果-创新互联

这篇文章将为大家详细讲解有关vue如何实现选中效果，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

10年积累的成都网站制作、成都做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有青神免费网站建设让你可以放心的选择与我们合作。

Vue是数据驱动

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

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

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

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

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

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

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

Vue怎么实现这个效果

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

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

关于vue如何实现选中效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

网站标题：vue如何实现选中效果-创新互联
转载源于：http://lszwz.com/article/dgdcpi.html

其他资讯

售后响应及时

7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉，无效全额退款

乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，乐山网站建设，乐山网站设计，乐山网页设计，乐山网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，小谭建站位于乐山市龙岗区大运软件小镇，小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。

友情链接交换友情链接

成都网络营销成都定制网站建设成都电信光华数据中心明安消防器材企业网站建设公司网站搜索引擎优化做网站营销型网站成都微信小程序开发西云服务器托管

Copyright © 2022 青羊区小谭信息技术咨询服务工作室乐山建站工作室 All Rights Reserved 蜀ICP备2021004003号-25

Copyright © 2022 青羊区小谭信息技术咨询服务工作室乐山建站工作室

蜀ICP备2021004003号-25