Vue初体验:鼠标悬停控制元素高亮效果

使用变量location记录鼠标悬停的行,在遍历列表时比对index与location是否一致来控制高亮

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    .choose {
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <ul style="list-style: none">
    <!-- index == location -->
    <li @mouseenter="mouseenter_f(index)" :class="{'choose': index == location}" v-for="(line,index) in lines">
      {{line}}
    </li>
  </ul>
</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      lines: ['line0', 'line1', 'line2', 'line3'],
      //记录鼠标悬停的行
      location: 0
    },
    methods: {
      mouseenter_f: function (index) {
        this.location = index;
      }
    }
  });
</script>
</body>
</html>

你可能感兴趣的:(vue)