VUE点击不同的列显示颜色

最新推荐文章于 2023-01-16 17:32:28 发布

新手小白请求出战！

最新推荐文章于 2023-01-16 17:32:28 发布

阅读量270

点赞数

分类专栏：前端笔记文章标签： javascript html5 vue.js es6

本文链接：https://blog.csdn.net/qq_41138726/article/details/109676823

版权

前端笔记专栏收录该内容

39 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用Vue.js实现列表项被点击时变为红色的效果。通过数据属性`currentIndex`记录当前选中项，并在`liClick`方法中更新此状态，结合`:class`指令动态应用样式。

摘要由CSDN通过智能技术生成

要求：一个点击谁时，谁就变成红色

<body>
    <div id="app">
        <!-- 作业是一个点击谁时，谁就变成红色，可以绑定类，用对象的方法，使用布尔值来确定 -->
      <ul>
          <li v-for="(item,index) in movies" :class="{active:currentIndex===index}" @click='liClick(index)'>{{item}}</li>
      </ul>

    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                movies:['海王','海贼王','加勒比海盗','海尔兄弟'],
                currentIndex:0,//记录状态
            },
            methods:{
                liClick(index){
                    this.currentIndex=index;
                }
            }
        })
    </script>
</body>

新手小白请求出战！

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE点击不同的列显示颜色

要求：一个点击谁时，谁就变成红色<body> <div id="app">  <ul> <li v-for="(item,index) in movies" :class="{active:currentIndex===index}" @click='liClick(index)'>{{ite.
复制链接

扫一扫

专栏目录