使用Vue对列表选中项标色
今天学习Vue的时候，要做一个作业，就是给一个数组，遍历数组显示出来，并对选中的项标色。大概如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style> .selectClass { color: red } </style></head><body> <!-- #Vue对象 --> <div id="app" v-cloak> <ul><br><!--v-bind:class="{selectClass:index==selectIndex}"的逻辑是，如果选中的index和我们通过方法传递过去赋值之后的selectindex一样，就为true，不一样就为false--!> <li v-for="(m,index) in movies" v-on:click="liClick(index)" v-bind:class="{selectClass:index==selectIndex}">{{m}}</li> </ul> </div> <script src="../Vue/vue.js"></script> <script> //let 变量 const常量 //变成范式：声明式编程 const app = new Vue({ el: '#app',//用于挂载要管理的元素 data: { movies: ['教父', '美国往事', '肖申克的救赎', '海上钢琴师'], selectIndex: -1 }, methods: { liClick(index) {<em id="__mceDel">//将传过来的Index赋值给我们定义的selectIndex this.selectIndex = index; } } }) </script> <!-- #endregion --></body></html></em> |
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了