Vue小作业：使用v-for 以及 v-bind 当我们点击某一行,某一行变颜色,其他不变。

最新推荐文章于 2026-02-24 15:17:41 发布
原创 最新推荐文章于 2026-02-24 15:17:41 发布 · 508 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文通过一个简单的Vue.js示例展示了如何实现列表项点击后的高亮效果。代码中使用了v-for指令遍历数据并为每个列表项添加点击事件，同时通过计算属性实现了列表项的动态样式变化。 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
        
        li {
            list-style: none;
            width: 100px;
            height: 30px;
            float: left;
        }
        
        .active {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <ul>
            <li v-for='(item,index) in movies' :class="{active:index===currentIndex}" @click="trigger(index)">{{item}}</li>
        </ul>
    </div>
    <script src="../vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                currentIndex: 0,
                movies: ['三国演义', '红楼梦', '水浒传', '西游记']
            },
            methods: {
                trigger: function(index) {
                    this.currentIndex = index
                }
            }
        })
    </script>
</body>

</html>

 

标签
#vue.js
farise
关注
PLC编程入门基础知识
热门推荐
SANRENYIXING的博客
08-26 2万+
PLC即为可编程逻辑控制器，实质是一种专用于工业控制的计算机，其硬件结构基本上与微型计算机相同。
第 0 篇｜开篇：为什么我们要从 RNN 讲到 Transformer？
最新发布
记录 IT 领域经验与见解的博客
02-24 56
本文介绍了NLP模型的发展历程，从早期规则式方法到如今Transformer模型的演进脉络。文章强调理解NLP技术需要从基础模型入手，重点分析了传统机器学习的局限性（无法处理变长有序输入和深层语义关联），以及RNN如何通过循环结构首次实现顺序依赖捕捉。作者指出Transformer之所以成为主流，是因为它通过自注意力机制解决了RNN的核心痛点（低效串行处理和长距离依赖问题）。专栏将采用"从问题到解决方案"的讲解方式，帮助读者建立完整的NLP知识体系，避免孤立学习和盲目追新。全文旨在为初学
Vue学习（二）——指令
weixin_45927758的博客
10-04 209
1.v-once指令 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &
【中科院一区Top-源码复现】Day-ahead photovoltaic power forecastingwith multi-source temporal-featureconvoluti
10-21 701
【中科院一区Top-源码复现】Day-ahead photovoltaic power forecastingwith multi-source temporal-featureconvoluti
vue大括号里接受一个函数_vue基本知识点总结
weixin_31448343的博客
01-17 2387
1.new Vue({el: '#app',router,components: { App },template: ''})vue.js应用的创建，通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用。在Vue之后的小括号中嵌套的大括号内，可以看到有多个参数。其中el，用于指定一个页面中已经存在的DOM元素，用来挂在Vue实例，他可以是HTML元素，也可以是CSS的选择器。挂载成功后...
Vue3新知识
m0_47333020的博客
12-23 1262
在mounted打印出所有信息< template > < div > 我是父组件 < / div > < A v - move : aaa . xiaohong = "{ background: 'red' }" > < / A > < / template > < script setup lang = "ts" > import type {// 自定义指令名字必须以v开头 const vMove : Directive = {// 元素初始化的时候 created() {
字符串中左右括号匹配判断
weixin_30786657的博客
10-14 1682
一、要求： 判断一个字符串中的小括号是否匹配。例如，字符串“（（（））（））”中的小括号匹配，而“）（）”中的小括号不匹配。如果匹配则提示匹配，如果不匹配则提示第一个不匹配的括号的位置。 二、 效果： 三、思路： 得到字符串，从头开始，一个一个字符判断。 （1） 如果是左括号则压入栈中。 （2） 如果是右括号，则将一个左括号从栈中弹出，匹配一对。若此时...
一个Vue实例可以挂载多个DOM元素吗？
ljbaofu_CSDN的博客
07-05 560
如果你正在开发一个可复用的Vue组件，并且想要让组件的使用者能够插入自定义的DOM元素或组件，你可以使用Vue的插槽功能。插槽允许你将父组件的内容分发到子组件的模板中，这可以在一定程度上实现“一个Vue组件挂载多个DOM元素”的效果，尽管这些DOM元素实际上是作为子组件内容被插入的。：虽然Vue实例不能挂载到多个DOM元素，但你可以在一个Vue实例中使用多个Vue组件，并将这些组件分布在不同的DOM元素中。这意味着，当你创建一个Vue实例时，你需要指定一个根元素，Vue将管理这个元素及其内部的子元素。
使用v-for 以及 v-bind 当我们点击某一行,某一行变颜色,其他不变
weixin_43999753的博客
11-05 331
需求： 使用v-for 以及 v-bind 当我们点击某一行,某一行变颜色,其他不变 <template> <div class="Test"> <li v-for="(item,index) in movices" v-on:click="btButten(index)" :class="index == active?'red':''">{{index}}-{{item}}</li> </ul> </div&g
VUE点击切换样式
crsitin_spade的博客
07-06 6746
2020年7月6日，晴，今天又是炎热的一天，无聊的我 积极的我来写一篇博客吧。 |ू･ω･` ) 我们需要先写好内容，还有样式 <div id="app"> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> </ul> </di
vue中 给v-for渲染的元素动态添加移除类名
qq_42789447的博客
05-05 2479
vue中 给v-for渲染的元素动态添加移除类名 今天在项目中需要做一个效果，点击对应的li改变当前的color，其他的li取消颜色，在jQuery中这很容易，由于之前已经引入了jQuery，所以直接想到了这个办法。 但是出于未知的原因，jQuery获取不到v-for出来的数据，根本找不到dom节点，所以不得不改变思路。 然后我想到了V-bind的方法。下面贴上步骤。 1.在data里面生明一个属...
自学Vue必看的v-bind绑定
qq_45473786的博客
03-24 2589
文章目录v-bind绑定属性基本语法语法糖写法v-bind动态绑定class通用样式常规语法和语法糖写法对象语法动态绑定class数组语法绑定class v-bind绑定属性 基本语法 v-bind:[属性名]="变量名" 语法糖写法 :[属性名]="变量名" <body> <div id="app"> <a v-bind:href="ahref"&gt...
B站 Vue作业4
weixin_45785497的博客
08-18 398
B站 Vue作业4 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color:red; } </style> </head> <body> <div id="app">
使用Vue实现点击事件变颜色并且显示选中文字
weixin_69218754的博客
04-24 1882
选择了显示文字并且改变颜色，希望能帮到各位小伙伴。首先需要引入Vue.js。
VUE 点击对应项变颜色
Pluto_98的博客
03-12 690
CSS .active{ color: red; } HTML <ul> <li v-for="(m,index) in movie" @click="h(index)" :class="count==index ? 'active' :''">{{m}}</li> </ul>...
vue循环数据点击变换颜色
weixin_42776027的博客
02-20 1809
<template> <div> <div v-for='(item,index) in arr' v-bind:class='{bg:index==isactive}' @click='fn(index)'> {{item}} </div> </div> </template> &l...
Vue实现选项卡切换，tab切换
努力变好
10-28 2万+
1、实现tab切换就是 单击一个选项卡显示其对应的内容，且被点击的选项卡改变颜色，下面有两种实现方法（都不要忘了vue.js的目录要写正确） 2、第一种方法效果图 这个没什么可说的，直接看代码吧（两种方式） 2、第一种完整代码（下边这段代码是我在网上学的） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document<.
点击即变色 小案例
零碎@流年絮语 的博客
01-26 126
案例说明： 点击列表中的某一项，该项变颜色。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script
被迫走上前端之路第二课之vue的v-bind属性绑定
David_house的博客
03-26 472
在 Vue 中，双大括号只能用于文本插值。为了给 attribute 绑定一个动态值，需要使用 v-bind指令。
VUE基础篇Part4（v-bind动态绑定class，style）
weixin_42617604的博客
05-30 261
1、了解 v-bind 指令 概念：DOM元素经常会动态的绑定一些 class 属性和 style 样式，v-bind 可以动态的绑定元素的属性，并且更改属性，所以会经常用到 例子： <div id="app"> <a v-bind:href="url">点我去百度</a> <img v-bind:src="imgUrl" alt=""> ...
vuejs--v-bind--v-on--v-model
琳琳的博客
03-21 344
v-bind页面和浏览页面，在console中输入：app.$data.my_color = "red"，就可以看到对应的文字颜色变成了红色，点击变颜色也会发生颜色变化 v-on用于触发事件 v-on后面可以接HTML的标准事件。例如： click（单击鼠标左键） dblclick（双击鼠标左键） contextmenu（单击鼠标右键） mouseover（指针移到有事件监听的元素或其子元素内） mouseout（指针移出元素，或者移到其子元素上） keydown（键盘动作：按下任..
vue学习(五)基础入门-基础知识(4)
wuyxinu的博客
11-02 259
v-bind v-bind 语法糖 v-bind 使用JavaScript表达式 v-bind 动态绑定class 之前，原生操作 v-bind 绑定class v-bind 绑定数组语法 vue v-for出来的列表，点击当前，当前被点击的字体变颜色 <!DOCTYPE html> <html lang="...
自动化仓库堆垛机结构.pdf
冷库 食品冷冻 冷链
2024年湖北省10类【地理+人文】shp文件-省+市+县区+乡镇街道+水系+大学+景点+道路+高程+土壤类型
本资源汇集了2024年湖北省范围内10大类关键地理与人文空间数据的矢量格式（Shapefile，简称shp），涵盖从宏观行政区划到微观人文地理要素的多个维度，是开展区域空间分析、城市规划、资源管理、社会经济研究等项目的重要基础数据。该套数据经过统一坐标系处理与标准化分类整理，结构清晰、属性完备、精度较高，适用于ArcGIS、QGIS等主流GIS平台1、行政区划按照最新统计行政边界更新（通常基于自然资源部或国家统计局发布），分为四级：省（省级）、地级市（市级）、县区（县级）、乡镇街道（乡级），具备完善的编码与名称字段，适合空间制图与分级统计分析2、水系（面+线）包括各主要河流，以及大中型水库、蓄水池、支流网状系统等，支持水文分析、水系可视化、流域管理与水资源模型构建3、大学/高等院校分布覆盖武汉大学等131所本科及高职院校，提供名称、类别、地址、坐标信息，可用于教育资源空间分布研究、服务半径分析、人口迁移与高校资源均衡研究4、景点分布收录三峡大坝等1241个旅游景区，具备名称、类型（自然/人文/复合型）、所在行政区、开放情况等字段，适合旅游资源规划、文化地理研究、地理标志分析等应用5、道路包含高速、省道、县道、乡村道路、城市主次干道等，具备道路路名、路段长度等字段信息，支持交通可达性分析、路径规划、交通热力图构建等GIS应用6、高程包含全国范围高程（TIF），直接加载到GIS平台即可7、土壤类型由中国土壤普查及国家基础地理数据库提取，精度达到1:25万或更高，涵盖主要土类（如褐土、黄潮土、水稻土等），广泛应用于农业适宜性评估、土地利用优化、乡村振兴规划等领域数据格式为标准shp文件，统一投影为 WGS 1984，便于直接加载使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值