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 相关文章推荐
javascript之可拖动的iframe效果代码
Aug 01 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
json数据格式常见操作示例
Jun 13 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
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
ThinkPHP中redirect用法分析
2014/12/05 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
JS delegate与live浅析
2013/12/21 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
python使用wxpython开发简单记事本的方法
2015/05/20 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
python3中int(整型)的使用教程
2017/03/23 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
pymysql模块的操作实例
2019/12/17 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
python简单实现9宫格图片实例
2020/09/03 Python
Oracle性能调优原则
2012/05/03 面试题
生产主管岗位职责
2013/11/10 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
快递员岗位职责
2014/09/12 职场文书
研究生导师推荐信
2015/03/25 职场文书
担保贷款承诺书
2015/04/30 职场文书
小学班级管理心得体会
2016/01/07 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android