vue实现点击列表第一个变色其他不变色

原创于 2020-11-09 21:00:59 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

笔记专栏收录该内容

27 篇文章

订阅专栏

本文通过一个简单的Vue.js实例展示了如何使用Vue指令实现列表项点击高亮的功能。代码中使用了v-for进行列表渲染，并通过@click绑定点击事件来改变当前激活项的状态。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <h1 v-for="(item,index) in movies"
      :class="{active:index==isActive}"
      @click="mouseClick(index)">{{item}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
  const vue = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      movies:['七月','八月','九月','十月'],
      isActive: false
    },
    methods:{
      mouseClick:function (index) {
          this.isActive = index
      }
    }
  })
</script>
</body>
</html>