1. 先把需求说白了：点击变色的背后是什么
先别急着敲代码，我们把“ul点击文字变色，默认第一个li文字变色”这个需求往透了说。
拆开看，它其实包含三个核心点：第一，页面上有一个列表，列表项可以点击；第二，点击某个列表项之后，它的文字颜色要变化；第三，页面一进来，默认第一个列表项就处于高亮状态。这三个点合在一起，本质上就是前端最常见的“当前激活项”交互。你随便打开一个网站，导航栏里的当前页高亮、Tab切换时标签变色、侧边菜单选中态、商品规格选中态、分页器当前页高亮——全都是同一个套路。
所以别看这个示例简单，它是“列表渲染 + 点击事件 + 动态样式切换”的最小可运行模型。把这个模型真正吃透了，以后遇到任何“选中态”场景，你都是在重复做同一件事。
那这件事在Vue里怎么做？核心思路是：用一个数据字段记录“当前选中的项”，谁的标识等于这个字段，谁就获得高亮样式。点击列表项时，把它的标识赋值给这个字段。就这么简单。
这里有个很多人刚学时容易绕进去的弯：到底该用索引（index）还是用唯一标识（id）来判断选中？这个问题后面我会专门展开讲，但你可以先记住一个结论——索引适合当前这个示例，真实项目里优先用id或唯一键，理由后面细说。
另外还要提醒一点：这个需求本身不涉及任何组件通信、路由状态、持久化存储，所以用一个组件内部的数据字段就完全够了。不要一上来就去考虑Vuex、Pinia之类的状态管理方案，那是把简单问题复杂化。Vue的响应式数据本身就是最轻量的状态管理。
2. 为什么用Vue做这件事最顺手
2.1 原生DOM写法的问题在哪里
如果用原生JavaScript写，代码大概是这样的：先给每个li绑定事件，然后事件函数里去操作DOM，先去掉所有li的某个class，再给当前点击的那个li加上这个class。伪代码思路是这样：
var lis = document.querySelectorAll('ul li') lis.forEach(function(li) { li.addEventListener('click', function() { // 先把所有 li 的高亮去掉 lis.forEach(function(item) { item.classList.remove('active') }) // 再给当前点击的 li 加上高亮 this.classList.add('active') }) })这个写法能跑，但是有一个天然的问题：你的关注点被分散了。你要手动去查DOM、手动加事件、手动管理class的增删。逻辑一旦复杂起来，比如同时要切换颜色、切换图标、更新一块关联区域的内容，DOM操作就会变得非常啰嗦，而且容易出Bug——比如你忘了先去掉旧的高亮，结果出现了两个高亮项。
这个“先全部取消、再单独点亮”的双步操作，在原生写法里是必须写的。但是在Vue里，你根本不需要关心DOM上的class变化，你只需要改数据：把“当前选中项”这个值改掉，页面自动就只剩一个高亮了。
2.2 Vue的核心逻辑：数据驱动视图
Vue解决这个问题的思路完全不一样。它不让你去操作DOM，而是让你定义“状态”，然后告诉模板：当状态是什么样的时候，界面应该长什么样。剩下的视图更新工作，Vue的响应式系统自动完成。
用一句生活化的话来概括：原生写法是“你亲手拆掉旧的灯泡，再亲手装上一个新灯泡”，Vue的写法是“你只需要告诉房间‘现在要照亮3号灯’，电路系统自动把1、2号灯关掉、3号灯点亮”。
具体到我们的示例里，状态就是“当前选中哪一项”。用一个数据来表示：
data() { return { currentIndex: 0 // 默认选中第0个，也就是第一个li } }模板里，我们给每个li动态绑定class，当索引等于currentIndex时，加上高亮class：
<li v-for="(item, index) in list" :key="item.id" :class="{ active: index === currentIndex }" @click="currentIndex = index" > {{ item.name }} </li>注意这一句：@click="currentIndex = index"。它不是“把当前点击的li变成红色”，而是“把当前选中项的下标更新为当前点击项的index”。样式呢？由:class="{ active: index === currentIndex }这句自动推导——只要这个li的index和currentIndex相等，它就带上active样式。
这就是数据驱动的精髓：你在代码里几乎找不到“变红”“变色”这种词，你只处理数据。颜色是CSS的事情，选中态是数据的事情。两者在模板层面对接，干净利落。
2.3 这个模式为什么可扩展
理解了上面这个链路，你会发现，要扩展功能非常容易。举个例子，如果需求从“点击变色”变成“点击变色，同时显示对应的内容面板”，你只需要把list里的数据扩展出一个content字段，再根据currentIndex渲染对应内容。不需要重新梳理DOM操作逻辑。
再举个例子，如果需求从“单级列表”变成“级联菜单”，第一级点击时自动选中，同时联动第二级的默认选中项，你还是在操作数据——把第二级列表的数据和选中项一起改掉。DOM层面的东西，Vue全部代劳了。
所以，学会Vue之后，你的思维方式要从“操作视图”切换到“操作数据”。这需要一点时间适应，但一旦转变过来，写交互的速度会快很多。
3. 零基础拆解：每一行代码解决什么问题
3.1 模板区域怎么写
完整模板如下：
<template> <div> <ul class="color-list"> <li v-for="(item, index) in list" :key="item.id" :class="{ active: index === currentIndex }" @click="currentIndex = index" > {{ item.name }} </li> </ul> </div> </template>逐行解释：
v-for="(item, index) in list"：遍历list数组，item是每一项，index是数组下标。注意这里的顺序是固定的，第一个参数是元素本身，第二个参数才是索引，别写反了。:key="item.id"：给每一项一个唯一定位标识。Vue靠它在列表更新时精确跟踪每个节点，而不是靠猜。直接说结论：key一定要写，而且不要用index当key，后面排查章节我详细说为什么要避坑。:class="{ active: index === currentIndex }"：这是动态class绑定的对象语法。对象里的键名active是class名称，键值是布尔表达式，为true时这个class存在，为false时不存在。这里也可以写成一个方法，比如:class="{ active: isActive(index) }"，可读性会更好，适合class判断逻辑复杂时使用。@click="currentIndex = index"：点击事件绑定。语法糖是v-on:click，@click是缩写。注意，这里直接在模板里写赋值语句，Vue是允许的，适用于这种极简逻辑。如果点击之后要做的事情超过两步，建议抽成method，比如@click="handleSelect(index)"。{{ item.name }}：文本插值，把list中每一项的name字段渲染到页面上。
3.2 脚本区域的写法
export default { name: 'ColorList', data() { return { currentIndex: 0, list: [ { id: 1, name: '前端开发' }, { id: 2, name: '后端开发' }, { id: 3, name: '移动端开发' }, { id: 4, name: '测试开发' }, { id: 5, name: '运维开发' } ] } }, methods: { handleSelect(index) { this.currentIndex = index } } }有几个细节值得提一下：
第一个，currentIndex: 0就是“默认第一个高亮”的实现。因为数组下标从0开始，第一个li的index是0，默认当前选中项是0，这个li天然就带着active样式。这是最简单、最直观的做法。
第二个，data必须写成函数返回对象的形式，不能写成一个普通对象。这是因为组件会被复用，如果是普通对象，多个组件实例会共享同一个数据引用，一个改了其他也跟着变。写成函数，每次创建实例都会返回一份独立数据。
第三个，如果你用了handleSelect方法，那模板里应该这么写：
@click="handleSelect(index)"因为方法里需要拿到当前项的index，所以传参是必要的。如果不传参，你在方法里拿不到任何跟当前项相关的信息。
3.3 样式区域怎么写
样式很简单，但有一个细节要注意，就是active状态的样式必须存在：
<style scoped> .color-list { list-style: none; padding: 0; margin: 0; display: flex; } .color-list li { margin-right: 20px; padding: 6px 14px; border-radius: 4px; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; } .color-list li.active { color: #ffffff; background-color: #2d6cdf; } </style>这里的scoped关键字表示样式只作用于当前组件，不会污染全局。它的实现原理是给当前组件的DOM节点添加一个data属性，然后样式选择器带上这个属性，从而实现样式隔离。
我见过不少新手在这里犯过迷糊：写了li.active，但是样式不生效，找半天找不到原因。大概率是class绑定语法写错了，或者active这个类名根本不在class列表里。可以打开浏览器开发者工具，查看元素上是否真的加上了class="active"，这样能快速定位。
4. 从零到一：完整实操过程演示
4.1 创建Vue项目
假设你已经有一个Vue项目，创建项目有几种方式：如果你用Vite，执行：
npm create vite@latest vue-color-list -- --template vue进入项目目录：
cd vue-color-list npm install然后打开src目录，在App.vue里替换内容，或者在components目录下新建一个ColorList.vue，然后在App.vue里引入使用。这里我选后者，更符合组件化的思路。
新建src/components/ColorList.vue，把上面模板、脚本、样式三块填进去。然后在App.vue中引入：
<template> <div class="app-container"> <h3>点击切换高亮示例</h3> <ColorList /> </div> </template> <script> import ColorList from './components/ColorList.vue' export default { name: 'App', components: { ColorList } } </script>4.2 两种判定选中方式的对比
我不会只给你一种写法。上面我用了索引（index）来判定选中，这是当前示例最简单的方式。但还有另一种写法：用值来判定。直接把list里每一项的某个唯一字段和currentId做比对。
我把两种方式放在一起对比，这样你能更直观地看到区别：
| 判定方式 | 核心字段 | 模板写法 | 适用场景 |
|---|---|---|---|
| 索引判定 | currentIndex: 0 | index === currentIndex | 列表内容固定简单、无增删排序 |
| 值判定 | currentId: null | item.id === currentId | 列表来自后端、会增删排序、需要持久化 |
值判定的代码会长这样：
<li v-for="item in list" :key="item.id" :class="{ active: item.id === currentId }" @click="currentId = item.id" > {{ item.name }} </li>对应的data：
data() { return { currentId: 1, // 默认选中 id 为 1 的项 list: [...] } }两种方式都能实现“默认第一个高亮”。区别在于，索引判定短平快，但有个隐患：一旦list里某一项被删除或者排序发生变化，index和项之间的对应关系就乱了。比如你默认选中的是当前index为0的项，但列表从后端重新拉取后第一条数据变了，高亮跟着变了，但可能你压根没想让它变。
而值判定没有这个问题：你记录的是选中项的id，不管列表怎么排序，只要id还在，高亮就一直跟着它走。
所以我的建议是：自己写Demo随便用索引没问题，但接真实后端接口时，优先用值判定。这个经验我踩过坑，确实是“过来人”才会注意到的细节。
4.3 点击变色之后的反馈完善
除了单纯变色，还有一个体验细节容易被忽略：点击反馈。用户点了一下，如果样式切换过于突兀，视觉感受不太好。这里有两个优化方向：
第一个是transition过渡。在li上加上transition: color 0.2s ease，颜色变化会变得平滑，观感好很多。注意transition要写在普通li的样式里，而不是写在高亮class里，因为过渡是要从普通态到高亮态双向生效的。
第二个是hover态。在普通li上加上:hover { color: #2d6cdf }，鼠标悬停时有轻微变色提示，用户会直观感知到“这个可以点”。不加cursor: pointer的话，鼠标移上去是箭头而不是手型，用户不一定会意识到它能点击。
这些细节不写在需求里，但写上去之后，页面会显得成熟很多。一个小项目，把它当成正式项目来做，学到的东西远超示例本身。
5. 不只是变色：这个模式的实用进阶方案
5.1 从“变色”到“Tab切换”
点击列表项变色，本质上就是Tab切换的一个简化版。真实项目里最常见的场景是：左侧/顶部有几个Tab，点击后在下方切换对应内容区域。
基于我们已有的代码，只需要再加一个数据字段就行。比如list里每一项增加content：
list: [ { id: 1, name: '前端开发', content: '负责界面与交互实现' }, { id: 2, name: '后端开发', content: '负责接口与数据存储' } ]模板里增加一个展示区域：
<div class="content-panel"> {{ currentContent }} </div>对应的计算属性：
computed: { currentContent() { const currentItem = this.list.find(item => item.id === this.currentId) return currentItem ? currentItem.content : '' } }你会发现，核心逻辑一点没变，只是在旁边加了一串展示数据。这就是这个模式生命力的体现：高亮永远只是表象，选中了谁才是本质。所有围绕选中的附加展示，都是从“选中状态”这个数据延伸出来的。
5.2 从“单选”到“多选”
有些场景不是单选，比如筛选标签，用户可能同时选中多个。这就要把currentIndex从数字改成数组，存储所有选中的索引或id。
模板里判断是否选中的逻辑变成：
:class="{ active: selectedIds.includes(item.id) }"点击时，如果在数组里就移除，不在就添加。这种多选场景不适合直接在模板里写赋值表达式了，应该写成方法：
methods: { toggleSelect(id) { const idx = this.selectedIds.indexOf(id) if (idx > -1) { this.selectedIds.splice(idx, 1) } else { this.selectedIds.push(id) } } }这个跟点击变色的单选用的是不同的数据结构，但思路是相通的：用一个数据状态保存用户的选择，视图根据这个数据自动渲染。
5.3 从“组件内状态”到“跨组件共享”
上面的所有示例，状态都在组件内部。但如果你有两个组件需要共享同一个“当前选中项”呢？比如顶部导航组件需要高亮当前页面，侧边栏组件需要联动展开对应菜单，这时候数据需要提升到它们共同的父组件，或者放进全局状态管理。
Vue的解决方案是provide/inject（依赖注入）或者Pinia（Vue 3推荐的全局状态库）。但本质上，你维护的还是“当前选中项”这个状态，只是存放的位置变了。所以我说，本示例看起来简单，实际上是很多复杂交互的地基。地基稳了，上面盖几层楼都不会晃。
6. 实操避坑：这些细节最容易出问题
6.1 为什么:key不要用index
有经验的Vue开发者反复强调:key的重要性，但很多教程只会说“需要加key”，却不解释为什么。这里我讲清楚。
Vue的虚拟DOM通过key来识别每一个节点。当列表数据发生变化时，比如插入、删除、排序，Vue会尽量复用已有的DOM节点，减少创建和销毁的开销。如果key是index，那么当数组顺序改变时，Vue会认为key为0的节点还是原来那一个，只是内容变了。这个过程中，如果节点内部有状态（比如输入框内容、选中状态），就会出现错乱。
看一个具体例子，假设你的列表有3项：A、B、C，当前选中的是index为1的B。这时候你在最前面插入一项X，数组变成X、A、B、C。此时X的index是0，A的index是1。如果你用index做key，Vue发现key=1的位置原来放的是B，现在放的是A，它会把B的DOM节点复用来渲染A。而记录在组件实例上的状态却是B的——界面和状态就错位了。
如果你用id做key，插入X之后，id为B的那一项位置虽然变了，但Vue能识别出“这个元素还是原来的B”，组件实例直接移动过去，状态不会丢。
所以，列表拼接、插入、排序、删除场景下，key用id而不是index，是必须遵守的规则。本示例中列表内容固定不变，用index问题不大，但养成用id的习惯，能少踩很多动态列表的坑。
6.2 事件对象参数和index参数混淆
有些同学想把“当前点击的元素本身”传给事件函数，写出了这样的代码：
@click="handleSelect($event, index)"然后在方法里：
handleSelect(e, index) { this.currentIndex = index }这里$event是DOM事件对象，它可以拿到触发事件的元素，比如e.target。但请注意，这个需求根本不需要事件对象——你真正需要的是index。所以最简写法就是直接把index传过去。不要觉得需要事件对象才算完整，能用最少的信息完成任务就是最好的代码。
6.3 scoped样式不生效的坑
在Vue单文件组件中，<style scoped>会给当前组件模板里的元素添加一个data属性，然后通过属性选择器限定样式作用范围。
但有两种情况会感觉样式“失效了”：
一种是给子组件根元素写样式。父组件中，scoped样式可以作用于子组件的根节点，这是Vue故意保留的便利。但如果你想在父组件里通过选择器钻到子组件内部去改样式，就没用了。
另一种是动态添加的DOM。如果你往DOM里插入一段新的HTML片段而不是Vue虚拟DOM管理的节点，这段新节点的元素上不会有data属性，scoped样式自然作用不到它。
6.4 currentIndex和组件状态不同步
举个例子，你这个列表组件在父组件里被使用，父组件通过props传入list数据。如果父组件异步从接口获取数据，一开始list是空数组，渲染出来的列表为空，默认高亮无从谈起。等数据返回后，列表渲染出来了，currentIndex还是0，第一个li确实获得了高亮，这里没毛病。
但如果你做的是“重置功能”——点击重置按钮后要回到默认高亮第一项，不仅数据要重置，currentIndex也要重置。漏了后者的话，界面显示的高亮项可能跟数据对不上。
还有另一种情况：子组件里默认currentIndex是0，但父组件希望默认高亮某一项，通过prop传入。如果子组件里写死了currentIndex，父组件的值传不进去。正确做法是：监听prop变化，或者直接用prop初始化currentIndex。
这些场景都是“状态不同步”的变体，排查思路都是一样的：先确认界面上选中的索引或id，和实际数据状态里的选中值，是不是同一个值。
6.5 点击事件绑定漏掉冒泡处理
如果li里面还有子元素，比如一个删除按钮、一个小图标，点击这个子元素的时候，事件会冒泡到li上，触发选中逻辑。这时候如果子元素有自己独立的点击处理，就会发生“点删除按钮，整行被选中”的诡异现象。
解决方案是在子元素的点击事件处理里阻止冒泡：
<span @click.stop="handleDelete(item.id)">删除</span>@click.stop是.stop修饰符，等价于event.stopPropagation()。原理很简单，但忘写的人很多，尤其是初学者，调试半天以为是点击事件写错了，实际上是冒泡导致的问题。
7. 最终代码整理：可以直接复制运行的版本
我整理一个完整的可以直接用的版本。这个版本我用了值判定（currentId）而不是索引判定，因为这个写法更适合你后续接真实数据。如果你想要最简版本，把currentId换成currentIndex，模板里的比较改成index === currentIndex即可。
完整的ColorList.vue文件：
<template> <div class="color-list-wrapper"> <h3 class="list-title">技术方向选择</h3> <ul class="color-list"> <li v-for="item in list" :key="item.id" :class="{ active: item.id === currentId }" @click="handleSelect(item.id)" > {{ item.name }} </li> </ul> <div class="tips">当前选中：{{ currentName }}</div> </div> </template> <script> export default { name: 'ColorList', data() { return { currentId: 1, list: [ { id: 1, name: '前端开发' }, { id: 2, name: '后端开发' }, { id: 3, name: '移动端开发' }, { id: 4, name: '测试开发' }, { id: 5, name: '运维开发' } ] } }, computed: { currentName() { const match = this.list.find(item => item.id === this.currentId) return match ? match.name : '' } }, methods: { handleSelect(id) { this.currentId = id } } } </script> <style scoped> .color-list-wrapper { padding: 20px; max-width: 600px; } .list-title { font-size: 18px; margin-bottom: 12px; } .color-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; } .color-list li { margin: 0 12px 12px 0; padding: 8px 16px; border: 1px solid #d9d9d9; border-radius: 4px; background-color: #fafafa; cursor: pointer; transition: all 0.2s ease; color: #333; } .color-list li:hover { border-color: #2d6cdf; color: #2d6cdf; } .color-list li.active { background-color: #2d6cdf; border-color: #2d6cdf; color: #fff; } .tips { font-size: 14px; color: #666; } </style>运行起来之后的效果是：五个列表项排成一行，第一个默认蓝底白字。点击任意一项，高亮切换过去，下方提示文字同步更新。
这个版本的代码里有几个东西比最简版多出来，但都有用。一是computed计算属性，用来根据选中id推导当前名称，界面展示数据不用手动维护。二是hover态和过渡动画，提升了交互质感。三是用id做判断和key，为后续列表数据变化做准备。
8. 再进一步：把“选中态”玩出更多花样
这个示例的核心是“选中态管理”，它是一种非常基础的交互模型。掌握之后，可以往很多方向延伸：
带图标的列表高亮：点击变色的同时，图标也跟着切换成实心状态。原理一样，只是active样式里多了图标变化规则。
单选卡片组：类似于商品规格选择器，点击某个卡片时，边框加粗、打勾图标出现。实现上还是动态class切换。
步骤条：每一步有完成态和当前态，点击时切换当前步骤。本质上还是选中态，只是样式状态种类从两种变成了多种。
联动场景：左边一个列表，右边一个内容面板，点击左边变色的同时，右边内容跟着切换。这个我在前面5.1节已经拆过，加一个计算属性就完成了。
这几种扩展看起来花样多，但全部是同一个底子：一个数据字段 + 一段动态class绑定表达式。所以我的建议是，新手不要急着往项目里堆组件库，先把这种最朴素的交互实现写明白。当你发现所有“选中态”场景都能用同一套思维快速写出来的时候，你就算真正掌握了Vue的一半基础功了。
最后再分享一个小技巧：调试动态class时，最快的验证方式不是在代码里猜，而是打开浏览器开发者工具，直接在Elements面板查看当前DOM元素上的class属性。如果active没出现在class列表里，那就是绑定的条件表达式求值成了false，顺着表达式去排查数据；如果active出现了但样式不对，那问题多半在CSS优先级或者样式定义上。这样一步步缩小范围，比瞎猜高效得多。
