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


Posted in Javascript onFebruary 11, 2018

这里用文字举例,图片切换的原理也是一样的

大概思路是:用两个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实现点击后文字变色切换方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript静态的url如何传递
May 03 Javascript
javascript prototype原型操作笔记
Dec 07 Javascript
jQuery UI-Draggable 参数集合
Jan 10 Javascript
jquery 最简单易用的表单验证插件
Feb 27 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 #Javascript
vue刷新和tab切换实例
Feb 11 #Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 #Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 #Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 #Javascript
使用vue-router设置每个页面的title方法
Feb 11 #Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 #Javascript
You might like
很实用的一个完整email发送程序
2006/10/09 PHP
php 学习资料零碎东西
2010/12/04 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
PHP的拦截器实例分析
2014/11/03 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
使用python解析xml成对应的html示例分享
2014/04/02 Python
python实现简单ftp客户端的方法
2015/06/28 Python
python实现中文分词FMM算法实例
2015/07/10 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Django REST 异常处理详解
2020/07/15 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
土木工程应届生求职信
2013/10/31 职场文书
六一亲子活动总结
2014/07/01 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书