Vue怎么实现点击后文字变色切换方法

小编给大家分享一下Vue怎么实现点击后文字变色切换方法，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

大概思路是：用两个class相同的span分别是切换前后的文字，class相同主要是为了变换前后的文字位置相同。然后用click事件控制它们的显隐。

代码如下：

HTML：

<span class="response" v-show="!showCommentInput" @click="showCommentInput = !showCommentInput">回复</span>
<span class="response" v-show="showCommentInput" @click="showCommentInput = !showCommentInput">回复</span>

JS：

data(){
 return {
  showCommentInput = false,
 }
}

CSS：

.response {
 font-size:14px;
 color: #3e3e3e;
 &:hover{
 font-weight: bold;
 }
 &+.response {
 font-weight: bold;
 }

看完了这篇文章，相信你对“Vue怎么实现点击后文字变色切换方法”有了一定的了解，如果想了解更多相关知识，欢迎关注行业资讯频道，感谢各位的阅读！