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

栏目: 编程语言 · JavaScript · 发布时间: 6年前

内容简介:下面小编就为大家分享一篇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;
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Head First Design Patterns

Head First Design Patterns

Elisabeth Freeman、Eric Freeman、Bert Bates、Kathy Sierra、Elisabeth Robson / O'Reilly Media / 2004-11-1 / USD 49.99

You're not alone. At any given moment, somewhere in the world someone struggles with the same software design problems you have. You know you don't want to reinvent the wheel (or worse, a flat tire),......一起来看看 《Head First Design Patterns》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

html转js在线工具
html转js在线工具

html转js在线工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具