小编给大家分享一下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怎么实现点击后文字变色切换方法”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。