在鼠标悬停时切换文本答案

【问题标题】：Toggle text on mouse hover在鼠标悬停时切换文本
【发布时间】：2019-09-03 18:26:21
【问题描述】：

我有一些文字：

Hover me

将光标定位在文本上时，我希望将其更改为：

I'm being hovered

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

Hover me

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

【问题讨论】：

Mouseover or hover vue.js的可能重复

标签： vue.js vuejs2

【解决方案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>

【讨论】：

【解决方案2】：

你需要定义你想要的输出和悬停状态的布尔值，我称之为“hoover”

  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" 并更改状态，但为了简洁起见，这有点毫无意义，因为我一直这样敲打。

【讨论】：