使用变量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>