vue01-点击某一个li，该项变红，再点击变黑

最新推荐文章于 2024-06-11 09:57:30 发布
最新推荐文章于 2024-06-11 09:57:30 发布
阅读量1k 收藏 3
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32097903/article/details/103432235
版权

昨天写vue的一个小作业，发现灵性的操作。

作业：使用v-for和v-bind指令，循环展示数组数据，展示到列表标签中。默认列表第一项为红色，之后，点击哪个哪个变红，再点击变黑。

提示：使用index，数组的下标

开始的思路：
1 显示数组数据到列表中。不管颜色
2 显示第一项为红色
3 点击某一项，某一项变红或变黑
实现代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>点击变红</title>
  <style>
    .i0color{
    
      color: red;
    }
    .i1color{
    
      color: red;
    }
   .i2color{
    
      color: red;
    }
   .i3color{
    
      color: red;
    }
 
  </style>
</head>
<body>
<!--点击列表中某一项，该项变红或黑，第一次打开页面时第一项显示红色-->
  <div id="app">
    <ul>
最低0.47元/天 解锁文章
过期小朋友、
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE渲染出的列表（每一列平级关系），点击的时候需要单独给li添加一个（：class）
Alexli的博客
09-12 731
原文转载地址：https://www.cnblogs.com/wenb/p/7611477.html 代码实例如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> </head> <style&gt...
css vue 列表点击变色，再点恢复
gdyhvy的博客
09-16 1795
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>this is title</title> <style> .first{ color:red; } .second{ color:black; } .
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
12-28
这里使用的是给被点击的li添加类名的方式 <template> <div class=person1> <div v-for=(item,index) click=clickAdd(index) key=index class={red:i> <div>{{item.name}}</div> </div> </div> </template> [removed] export default { data () { return { isShow: false, i: null, lis
Vue li始终前面有黑点
Daylight629博客
04-23 1918
Vue li始终前面有黑点 原代码 <ul class="paper" v-loading="loading" > 改： <ul class="paper" v-loading="loading" style="list-style: none;"> 解决
vue实现点击li变色
qq_56206082的博客
09-22 4384
利用v-for和v-bind实现点击li变色，由v-for遍历出内容和索引，点击li时传入index，判断遍历的index和点击的currentIndex相等时添加class属性，使其变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
Vue v-for循环之@click点击事件获取元素示例
10-16
今天小编就为大家分享一篇Vue v-for循环之@click点击事件获取元素示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue实现导航栏点击当前标签变色功能
10-16
主要为大家详细介绍了Vue实现导航栏点击当前标签变色功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue实现点击导航栏当前标签后变色功能
10-14
在Vue中，我们可以使用`<template>`标签来包裹视图内容，这里使用`v-for`指令遍历导航栏数据，为每个导航项添加一个`<li>`标签。同时，通过`:class`指令动态地添加或移除CSS类，以便改变选中状态的样式。这里我们...
案例2：列表数据点击实现变红的效果（40）
qq_47099087的博客
08-15 127
<style> .activity{ color: red; } </style> <div id="app"> <ul> <li v-for="(m,index) in movies" :class="{activity: currentIndex === index}" @click="getIndex(index)">{{index}}{{m}}</li>.
Vue中实现点击当前行变色
热门推荐
xiaosheng
05-17 1万+
话不多说,先上效果 默认第一行为红色,当点击第二行的时候,只有第二行变为红色 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color: red;; } </s.
vue修改el-pagination被选中背景颜色
m0_51589319的博客
09-25 4650
一般我们正常的属性会写在scope里，我们不想直接粗暴地把scope去掉影响全局，这个时候再写一个不带scope的style，把我们要覆盖的样式放进去，就可以了，一般设置一下active的背景颜色，以及hover时候的字体颜色。如下： <style> .el-pagination.is-background.el-pager li:not(.disabled){ background-color:#fff;/*进行修改未选中背景和字体*/ color:#fff; } .el-p
Vue3自定义按钮点击变色
m0_64054560的博客
02-15 4634
vue3简单实现点击变色，默认选中第一个按钮，未选中按钮为粉色，点击时颜色变为红色
Vue中点击ul获取具体是点击的哪一个li
qq_43114230的博客
08-16 7588
需求描述 项目是基于Vue的，想要实现的功能是： 1、点击ul就知道具体是哪一个li在点击 2、不给li绑定点击事件，只给ul绑定点击事件，因为li很多，一个个给li绑定事件比较麻烦 3、通过知道是点击的哪一个li，进而进行跳转 项目特殊 这个项目中，li标签下面还嵌套了两个标签，分别是img标签和span标签。后面会说到li嵌套和不嵌套对解决这个问题的影响。 <li> <img src="..." alt="" /> <span>message</span&g
【Vue】点击哪个li，就显示红色
王昱潇的博客
07-08 417
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&.
Vue基础知识练习案例--点击变色
YY的博客
11-19 778
Vue基础知识练习案例--点击变色
使用v-for实现点击当前li,li背景颜色变为红色，其余颜色不变
最新发布
HWL5679的博客
06-11 207
当currentIndex的值等于当前列表项的索引时，active类名会被添加到该列表项上，从而使其背景颜色变为红色。
vue点击变色
weixin_50501118的博客
08-22 5436
vue点击一个遍历后元素改变其颜色的方法，有两种情况，第一种是点击单行元素变色，点击另一行元素时，原来变色的元素变回原来的颜色，始终只有一行元素是变色的，第二种情况是点击后永久变色，点击其他元素变色不影响已经变色的元素。=index}]" @tap="btn(index)" >点击介绍...
vue.js：鼠标点击后变换颜色作业案例
零小唬的博客
12-07 1229
vue.js：鼠标点击后变换颜色作业案例
Vue3实现一个标题点击变粗
05-03
首先，需要在 Vue3 中安装并导入 Vue Composition API： ``` npm install @vue/composition-api ``` 然后在组件中使用 `useLink` 自定义钩子： ```vue <template> <div> <h2 :class="{ 'font-bold': isBold }" @click="isBold = !isBold">{{ title }}</h2> </div> </template> <script> import { defineComponent, reactive, toRefs } from '@vue/composition-api'; export default defineComponent({ setup() { const state = reactive({ isBold: false, title: '这是一个标题', }); return { ...toRefs(state), }; }, }); </script> ``` 上述代码中，我们使用 `reactive` 创建了一个响应式对象 `state`，其中包含了标题是否加粗的状态 `isBold` 和标题文本 `title`。 在模板中，我们使用 `:class="{ 'font-bold': isBold }"` 绑定了 `font-bold` 样式，当 `isBold` 为 `true` 时，标题文本将会加粗。 最后，我们使用 `@click="isBold = !isBold"` 绑定了点击事件，当用户点击标题时，`isBold` 将会取反，从而实现了点击标题变粗的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值