1

基于提到单个参数的大多数 vue 文档，我使用 v-on:mouseover 并根据每个项目颜色动态控制样式，因为我需要根据每个项目的颜色通过悬停来更改每个项目的颜色，尽管我使用了!important风格不变

<li v-for="item in items" v-bind:key="item.id">
    <a class="my-link"
        v-on:mouseleave="mouseLeave(item)"
        v-on:mouseover="mouseOver(item)">

        {{ item.title }}
    </a>
</li>

data() {
    return {
        items: [
            {
                id: 1,
                title: "one",
                color: "#ccc"
            },
            {
                id: 2,
                title: "two",
                color: "#000"
            },
            {
                id: 3,
                title: "three",
                color: "#c7c7c7"
            }
        ]
     }
},
methods: {
    mouseOver: function(item){
        this.$el.children[0].style.color = 'red !important';
    },
    mouseLeave: function(item){
        this.$el.children[0].style.color = `${item.color} !important`;
    }
}
4

1 回答 1

2

另一种不使用 mouseleave 和 mouseover 的方法，仅使用 CSS：

使用:style为其数据定义中的每个列表项应用主颜色。还要在父元素上添加class="list"带有悬停效果颜色的类。最后class="list-item"，它仅在悬停时从父级继承颜色。因此红色仅在悬停时继承：

<li v-for="item in items" v-bind:key="item.id" class="list" :style="{ color: item.color }">
    <a class="list-item">
        {{ item.title }}
    </a>
</li>

<style scopped>
.list-item {
  color: red;
}
.list-item:hover {
  color: inherit !important;
}
</style>

现场示例：

new Vue({
  el: '#app',
  data: {
       items: [
        {
          id: 1,
          title: "one",
          color: "red",
        },
        {
          id: 2,
          title: "two",
          color: "green",
        },
        {
          id: 3,
          title: "three",
          color: "blue",
        }
      ]},
  template: `
   <div>
    <li v-for="item in items" v-bind:key="item.id" class="list" :style="{ color: item.color }">
      <a class="my-link list-item">
        {{ item.title }}
      </a>
    </li>
  </div>`
})
.list-item {
  color: #ccc;
}
.list-item:hover {
  color: inherit !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

于 2020-06-13T06:45:00.240 回答