关于Vue.js之v-for和v-bind实现列表颜色切换

最新推荐文章于 2024-06-07 12:00:16 发布

y1655171397

最新推荐文章于 2024-06-07 12:00:16 发布

阅读量2.5k

点赞数

分类专栏： Vue的学习之旅文章标签： vue.js

本文链接：https://blog.csdn.net/y1655171397/article/details/104875529

版权

Vue的学习之旅专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：

在页面上显示列表，默认第一行为红色。鼠标点击某一列表时，该列表的颜色变为红色，其余列表仍为黑色。

代码实现：

<body>
  <div id="app">
    <ul>
      <li :class="{active:isActive == index}" v-for="(m,index) in movies" v-on:click="btnClick(index)">{{index+1}}-{{m}}</li>
    </ul>
  </div>
  
  <script>
    const app=new Vue({
      el:'#app',
      data:{
        movies:["星际穿越","星球大战","星际迷航","颠倒爱情"],
        isActive:false,
        // isActive:-1,
      },
      methods:{
        btnClick:function(index){
          this.isActive=index;
        }
      }
    })
  </script>
</body>