Question

我有一些文字：

Hover me

将光标置于文本上方时，我希望将其更改为：

I'm being hovered

将光标移开后，文本应更改回：

Hover me

我可以使用CSS做到这一点，但是我不知道如何使用Vue做到这一点？

Answer 1

类似的事情应该可以起作用。如果您使用computed属性，这是最简单的。

CodePen镜像：https://codepen.io/oze4/pen/XQapNP

new Vue({
  el: "#app",
  data: {
    hover: false
  },
  computed: {
    message() {
      return this.hover === true ? "I'm being hovered" : "Hover me";
    }
  },
  methods: {
    handleHover(s){
      this.hover = s;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>


<div id="app">
  <p @mouseover="handleHover(true)" @mouseleave="handleHover(false)">
    {{ message }}
  </p>
</div>

Answer 2

您需要定义所需的输出以及悬停状态的布尔值，我将其称为“悬停”

  data: () => ({
    hoover: false
  }),
  computed: {
    tyext() {
      if (this.hoover === false) {
        return "Hover Me"
      }
      return "I'm being hovered"
    }
  }

然后在模板中，您可以使用事件侦听器来更改布尔值。

<p @mouseenter="hoover = true" @mouseleave="hoover = false">{{ tyext }}</p>

您通常在模板中没有这样的逻辑，而是调用类似@mouseenter="changeHoover"的函数并更改状态，但是为了简洁起见，我展示了这一点，因为我一直在敲打类似这个。

鼠标悬停时切换文本

2 个答案: