基于多个数据的vue动态值

Question

基于大多数提到单个参数的 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`;
    }
}

Answer 1

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

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

<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">