vue01-点击某一个li，该项变红，再点击变黑-白红宇的个人博客

发布日期：2021-05-07 21:06:03 浏览次数：15 分类：精选文章

本文共 545 字，大约阅读时间需要 1 分钟。

昨天写vue的一个小作业，发现灵性的操作。

作业：使用v-for和v-bind指令，循环展示数组数据，展示到列表标签中。默认列表第一项为红色，之后，点击哪个哪个变红，再点击变黑。

提示：使用index，数组的下标

开始的思路：

1 显示数组数据到列表中。不管颜色

2 显示第一项为红色

3 点击某一项，某一项变红或变黑

实现代码

  
     点击变红  
     
       
          
     {  {index}}-{  {item}}

结果

整个列表任何一个表项被点击后，所有表项都变红或变黑。或者持续为红色。

新问题

点击某个表项，某个表项变红，怎么做？

新思路

想不cu来了，百度一下嘿嘿

“每个表项标签统一加显示或不显示的类，所以会一起变红，在数组中的每一个数据里添加一个字段isActive，控制具体哪个加样式”

新的实现

  
     点击变红  
     
       
          
     {  {index}}-{  {item.movie}}

结果

总结

样式只有一个，变红。关注的不应该是写多少个样式，而是样式加不加。样式怎么加，往数组元素增加字段，这个控制是否加样式。

上一篇：在ubuntu上面安装deb包

下一篇：git remote

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！