Vue点击切换颜色的方法


Posted in Javascript onSeptember 13, 2018

如下所示:

<template>
 <div>
  <div v-for="(list,index) in siYuan" class="aa" :class="{ red:changeRed == index}" @click="change(index)">{{list.a}}</div>
 </div>
</template>
 
<script>
export default {
 data(){
  return{
   siYuan:[
    {"a":"田"},
    {"a":"心"},
    {"a":"水"},
    {"a":"原"}
   ],
   changeRed:-1
  }
 },
 methods:{
  change(index){
   this.changeRed = index;
  }
 }
 
}
</script>
 
<style>
 .aa{
  cursor: pointer;
 }
 .red{
  color: red;
 }
</style>

以上这篇Vue点击切换颜色的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 跳转页面延迟2种方法
Mar 29 Javascript
Javascript window对象详解
Nov 12 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
Angular2自定义分页组件
Apr 19 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
node中的cookie的具体使用
Sep 13 #Javascript
vue动态改变背景图片demo分享
Sep 13 #Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 #Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 #Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 #Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 #Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 #Javascript
You might like
SONY SRF-40W电路分析
2021/03/02 无线电
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
转一个日期输入控件,支持FF
2007/04/27 Javascript
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
javascript如何创建对象
2016/08/29 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Web服务器框架 Tornado简介
2014/07/16 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
Django实现分页显示效果
2019/10/31 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
应届生法律求职信
2013/10/22 职场文书
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
高中数学教学反思
2014/01/30 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
Python移位密码、仿射变换解密实例代码
2021/06/27 Python