老师，能给我讲讲这题的思路吗？还有下面这段代码
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<div id="app">
<ul>
<!-- 在此补充代码 -->
<li
@click="clickBtn(index)"
:style="{'background':nowIndex == index ? item : '#073607'}"
v-for="(item, index) in list"
>
{{item}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
list: ["green", "pink", "orange", "purple"],
nowIndex: 0,
},
methods: {
// 在此补充代码
clickBtn: function (index) {
this.nowIndex = index;
},
},
});
</script>
在这里输入代码，可通过选择【代码语言】突出显示
正在回答
同学你好，问题解答如下：
该题主要是想实现点击li时，切换li的背景色。大体思路是：为每一个li都绑定style样式，从而显示、更新背景色；为每个li添加点击事件，点击某个li时，就将该li的背景色切换成数组list中对应的颜色。同学提供的代码，可以实现效果，结合同学的代码，老师为同学屡下思路：
遍历list，生成所有li，给每个li绑定点击事件，并将索引index传入到事件处理函数中：
设置变量nowIndex，用来记录当前第几个li需要设置背景色，默认是0，即索引为0的li，默认要显示背景色
背景色通过绑定style样式、并利用三元表达式来实现：
初始时，nowIndex的值是0，对第一个li而言，它的index是0，它的item是“green”，所以第一个li的背景色是绿色；第二li的index是1，不等于nowIndex，因此第二个li的背景色是#073607，其余li同理。
点击li时，要对应切换nowIndex的值为当前li的索引：
此时，如果点击的是第二个li，则nowIndex的值，变成1（索引）。由于nowIndex值改变，导致所有的li样式也动态更新:
对第一个li而言，它的索引是0，不等于nowIndex，所以它的背景色变成#073607；对第二个li而言，它的索引是1，等于nowIndex，所以它的背景色变成item（list中索引为1的元素），即“pink”，其余li同理。
上述过程，就实现了本题的效果。
祝学习愉快！
-
同学你好，解答如下：
每个li上都绑定了行内样式，用来修改背景色：
nowIndex == index ? item : '#073607'这个三元运算的结果，就是background的属性值；即nowIndex == index ? item : '#073607'这个式子的结果决定li的背景色是什么。
假设nowIndex 是0，第一个li的索引也是0，那么nowIndex == index 结果是true，因此初始时第一个li对应的item就是绿色，即第一个li背景色是绿色：
当点击li时，会切换nowIndex的值，即切换各个li上nowIndex == index ? item : '#073607'的值，即会改变li的背景色。
祝学习愉快！
2021-12-24 10:12:51 -
您好老师，三元运算符这里我明白了，我没有弄明白的是list数组里面的数值，它们不是for循环遍历时候显示在HTML页面上的文字吗？怎么就能决定当前点击的颜色呢？
data: {
list: ["green", "pink", "orange", "purple"],
nowIndex: 0,
},
2021-12-24 17:46:34
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星