Переключить текст при наведении мыши

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

Вам нужно определить желаемый вывод и логическое значение для состояния наведения, я назвал его "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", и изменили бы состояние, но я показал это для краткости, котораябыло немного бессмысленно, когда я продолжал стучать вот так.