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类型增加方法的实现代码(增加功能)
Dec 29 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
详解Vue源码之数据的代理访问
Dec 11 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
PHP 日期加减的类,很不错
2009/10/10 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
js比较日期大小的方法
2015/05/12 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
Python对List中的元素排序的方法
2018/04/01 Python
Python语言快速上手学习方法
2018/12/14 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
python 操作excel表格的方法
2020/12/05 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
开放系统互连参考模型
2016/06/29 面试题
幼儿园元旦活动感言
2014/03/02 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
医学专业大学生求职信
2014/07/12 职场文书
代办委托书怎么写
2014/08/01 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
公司介绍信范文
2015/01/31 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
详解TypeScript的基础类型
2022/02/18 Javascript