Vuejs学习笔记(一)-14.v-bind,v-for的集合使用-作业
需求:实现一个功能,点击的记录呈现一个颜色。
代码如下:
<!-- @author:invoker @project:project_lianxi @file: 05-作业.html @contact:invoker2021@126.com @descript: @Date:2021/7/1 15:04 @version: html5 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05-作业</title> <style> .active { color: red; } </style> </head> <body> <div id="app"> <h2>{{ message }}</h2> <ul> <li v-for="(item,index) in movies" @click="itemClick(index)" :class="getClasses(index)">{{item}}</li> </ul> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello', movies: ['盗梦空间', '壮志凌云2', 'muse', '禁闭岛', '落叶归根', '疯狂赛车'], currentItemIdex: -1 }, methods: { itemClick(index) { this.currentItemIdex = index }, getClasses(index) { return { active: this.currentItemIdex === index } } } }) </script> </body> </html>
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/14958938.html