在鼠标悬停时切换文本

Posted 2023-02-22

【中文标题】在鼠标悬停时切换文本

【英文标题】：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的可能重复

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