Vue点击切换颜色的方法
2018-09-13 10:03
836 查看
如下所示:
<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点击切换颜色的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Vue2.0点击切换类名改变样式的方法
- Vue实现active点击切换方法
- Vue实现点击后文字变色切换方法
- Vue 菜单栏点击切换单个class(高亮)的方法
- JS实现点击颜色块切换指定区域背景颜色的方法
- JS实现点击颜色块切换指定区域背景颜色的方法
- Android开发实现按钮点击切换背景并修改文字颜色的方法
- vue点击切换颜色限制个数(用了mui框架)
- Vue点击切换颜色
- jQuery实现导航栏头部菜单项点击后变换颜色的方法
- Vue.js点击切换按钮改变内容实例
- UIButton 设置圆角 边框颜色 点击回调方法
- 点击箭头向下 向右切换的方法
- RN中点击切换颜色,点击另一个恢复原先颜色
- Android 按钮点击切换颜色或者图片
- vue防止按钮在短时间内被多次点击的方法
- Button点击背景和字体颜色改变的实现方法
- Vue点击切换class
- radio切换,点击方法onclick
- jquery 点击按钮切换样式on方法使用