Vue点击切换颜色的方法

更新时间：2018年09月13日 10:03:20 作者：niesiyuan000

今天小编就为大家分享一篇Vue点击切换颜色的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

如下所示：

<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点击切换颜色的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue缓存的keepalive页面刷新数据的方法
这篇文章主要介绍了vue缓存的keepalive页面刷新数据的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
vue.js 自定义指令（拖拽、拖动、移动）指令 v-drag详解
这篇文章主要介绍了vue.js 自定义指令（拖拽、拖动、移动）指令 v-drag,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
一文了解vue-router之hash模式和history模式
这篇文章主要介绍了一文了解vue-router之hash模式和history模式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
Vue中ref和$refs的介绍以及使用方法示例
这篇文章主要给大家介绍了关于Vue中ref和$refs使用方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
vue-cli + sass 的正确打开方式图文详解
本文通过图文并茂的形式给大家介绍了vue-cli + sass 的正确打开方式，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-10-10
Vite结合whistle实现一劳永逸开发环境代理方案
这篇文章主要为大家介绍了Vite结合whistle实现一劳永逸开发环境代理方案，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vue3使用vue-count-to组件的实现
这篇文章主要介绍了vue3使用vue-count-to组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
element-ui table span-method(行合并)的实现代码
element-ui官网中关于行合并的例子是根据行号进行合并的，这显然不符合我们日常开发需求，因为通常我们table中的数据都是动态生成的，非常具有实用价值，需要的朋友可以参考下
2018-12-12
vue2.0实现导航菜单切换效果
这篇文章主要为大家详细介绍了vue2.0实现导航菜单切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
vue中的vendor.js文件过大问题及解决
这篇文章主要介绍了vue中的vendor.js文件过大问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08