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实现点击后文字变色切换方法，包括了Vue实现点击后文字变色切换方法的使用技巧和注意事项，需要的朋友参考一下 这里用文字举例，图片切换的原理也是一样的 大概思路是：用两个class相同的span分别是切换前后的文字，class相同主要是为了变换前后的文字位置相同。然后用click事件控制它们的显隐。 代码如下： HTML： JS： CSS： 以上这篇Vue实现点击后文字变色切换方
-
实现App外观主题切换功能，可以切换导航条、TabBar和字体的颜色，以及TabBar的按钮图片。 [Code4App.com]
-
问题内容： 我有一个引导网站，当屏幕尺寸小于992px时，会添加Hamburger切换器。代码如下： 可以更改汉堡切换按钮的颜色吗？ 问题答案： Bootstrap 4中的（汉堡包）使用SVG 。切换器图标图像有2个“版本”。一个用于浅色导航栏，另一个用于深色导航栏… 使用了较深的背景光/白色toggler 使用上较亮的背景黑色/灰色toggler 因此，如果要将切换器图像的颜色更改为其他颜色，可
-
本文向大家介绍vue在线动态切换主题色方案，包括了vue在线动态切换主题色方案的使用技巧和注意事项，需要的朋友参考一下 主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下： 1.添加webpack插件，新建文件webpack/themePlugin.js matchColors数组中可配置多个
-
本文向大家介绍利用Vue的v-for和v-bind实现列表颜色切换，包括了利用Vue的v-for和v-bind实现列表颜色切换的使用技巧和注意事项，需要的朋友参考一下 需求： 在页面上显示四个列表，初始时字体为黑色。 鼠标点击某一个列表时，该列表的颜色变为红色，其余列表仍为黑色。 代码实现： 代码解释： 首先浏览器直接显示列表，因为此时没有监听到click事件。 当鼠标点击某一个列表时，Vue自动
-
本文向大家介绍vue toggle做一个点击切换class(实例讲解)，包括了vue toggle做一个点击切换class(实例讲解)的使用技巧和注意事项，需要的朋友参考一下 实例如下所示： 以上这篇vue toggle做一个点击切换class(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。