Vue.js - 在鼠標懸停時更改 v-bind:style

Question

我有一個span ，可以在不同條件下顯示不同的背景圖像。

HTML：

  <span
      v-if="type"
      :style="styles"
    >
  </span>

在計算中：

styles() {
  return {
    "background-image": `url(${require(`../assets/images/${this.type}.png`)})`,
    height: "30px",
    width: "100%",
    display: "block",
    "background-size": "contain",
    "background-repeat": "no-repeat",
    "background-position": "center",
  };
},

我還有另一個條件可以在mouseover上顯示不同的背景圖像。

stylesOnHover() {
  return {
    "background-image": `url(${require(`../assets/images/${this.type}-hover.png`)})`
  };
},

我試圖在 HTML 跨度中添加@mouseover="stylesOnHover"但它顯示錯誤：

[Vue 警告]：v-on 處理程序中的錯誤：“TypeError：handler.apply 不是函數”

如何更改 mouseover 上的 background-image 屬性？ 謝謝。

Answer 1

您正在從您的方法返回一個對象，該對象未將樣式應用於元素。 您可以在您的狀態中設置一個布爾值，它確定應用於元素的樣式並處理模板中的其余部分。 或者你可以讓你的布爾值決定在你的計算樣式中合並樣式。

Answer 2

這是您正在尋找的最佳解決方案https://stackoverflow.com/a/46553407/14438744 （改用background-image ）

如果你真的想使用鼠標懸停，那么stylesOnHover 需要是一個方法，或者如果計算則它需要返回一個函數。 然后，您將在該方法/函數中更改event.target.style的 backgroundImage。