vue-----v-for和v-bind结合使用

最新推荐文章于 2024-06-26 07:05:28 发布

要买苹果吗？

最新推荐文章于 2024-06-26 07:05:28 发布

阅读量238

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_48785525/article/details/109656747

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <ul>
    <li  v-for="(m,index) in movies" @click="getIndex(index)" :class="{active: index == counter}">{{index}}--{{m}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      movies: ['RE0', '进击的巨人', '海王', '妇联四'],
      //定义一个不在下标范围内的数字
      counter: -1
    },
    methods: {
    //定义方法，拿到触发点击事件的元素的下标
      getIndex: function (index) {
        return this.counter = index
      }
    }
  })
</script>
</body>
</html>