vuejs里实现点击事件和鼠标悬停修改文字内容

Question

我要的效果是。点击切换关注和取消关注。
如果是【已关注】的情况下。鼠标悬停的时候会提示【取消关注】
如图：

        <button class="already-follow-icon-box" type="button">
          <a>已关注</a>
        </button>
        <button class="begin-follow-icon-box" type="button">
          <img src="@/assets/images/add-attention-icon.png" class="begin-follow-icon"/>
          <a>关注他</a>
        </button>

请问vuejs里面悬停怎样修改文字内容啊？

Answer 1

<div v-if="isFollowed" class="already-follow-wrap">
  <button class="already-follow-icon-box" type="button">
    <a>已关注</a>
  </button>
  <button @click="handleUnfollowClickEvent" class="unfollow-icon-box" type="button">
    <a>取消关注</a>
  </button>
<div>
<button v-else class="begin-follow-icon-box" type="button">
  <img src="@/assets/images/add-attention-icon.png" class="begin-follow-icon"/>
  <a>关注他</a>
</button>

<style lang="less">
.already-follow-wrap {
    &:hover {
      .unfollow-icon-box {
        display: inline-block;
      }
      
      .already-follow-icon-box {
        display: none;
      }
    }
    
    .unfollow-icon-box {
        display: none;
    }
}
</style>