Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >vue列表点击切换颜色

vue列表点击切换颜色

作者头像
kirin
发布于 2020-09-29 01:48:37
发布于 2020-09-29 01:48:37
2.4K00
代码可运行
举报
文章被收录于专栏:Kirin博客Kirin博客
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
*HTML代码块*
<div class='box'  v-for="( item,index)  in list"  :class='{activeindex==index ?  'box2'  :'' }  @click='changeIndex(index)' >
		{{item.title}}
</div>
css代码
.box{
	width:160px;
	padding:20px;
	color:black;
	text-align:center;
}
.box{
	width:160px;
	padding:20px;
	color:red;
	text-align:center;
}
   JS代码
   data(){
    return{
         activeindex:0,
    		list:[
				{ title:'我是一‘}{ title:'我是二‘,
				{ title:'我是三‘,
				{ title:'我是四‘}
                 ]
	       }
	},
	method:{
			changeIndex(index){
				this.activeindex=index;
			}
		}

效果类似如图

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/09/28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【vue学习】3.本地应用——显示切换,属性绑定
【vue学习】3.本地应用——显示切换,属性绑定 v-for 作用:根据数据生成列表结构 <body> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <ul> <!-- 索引index 从0开始 --> <li v-for="(item,index)
Swingz
2020/12/18
5450
Vue-QuickStarted
概念:指令(Directives)是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。
用户11097514
2024/05/31
960
Vue-QuickStarted
Vue2——监听页面滚动实现菜单和页面对应
如题,监听页面的滚动并激活相应的菜单,一个老项目的维护,后面反正要全部重构,这里就先实现功能就好了;
思索
2024/08/15
1530
vue快速入门的三个小实例
用vue做项目也有一段时间了,之前也是写过关于vue和webpack构建项目的相关文章,大家有兴趣可以去看下webpack+vue项目实战(一,搭建运行环境和相关配置)(这个系列一共有5篇文章,这是第一篇,其它几篇文章链接就不贴了)。但是关于vue入门基础的文章,我还没有写过,那么今天就写vue入门的三个小实例,这三个小实例是我刚接触vue的时候的练手作品,难度从很简单到简单,都是入门级的。希望能帮到大家更好的学习和了解vue,也是让自己能够复习一下vue。如果发现文章写得有什么不好,写错了,或者有什么建议!欢迎大家指点迷津!
守候i
2018/08/22
1.4K0
vue快速入门的三个小实例
想用Vue搭建考试答卷系统吗?
❝欢迎阅读本文,本文主要讲述【怎样用Vue搭建考试答卷系统】,文字通俗易懂,如有不妥,还请多多指正。❞ 本篇章主要讲述系统搭建逻辑。 考试系统 在这里插入图片描述 资源 Vue.js Element UI 第三方数据接口 业务 答题过程中,防止用户中途退出或者其他不可抗力因素阻碍答题,在每次选择都要请求下接口(接口状态为「未交卷」,只是保存用户的答题进度)。 选择答题区与答题卡必须同步,另外右侧的进度条也是同步的。 剩余时间的计算方法( begin.getTime() + duration * 1000
Vam的金豆之路
2021/11/30
9450
想用Vue搭建考试答卷系统吗?
完整MUI 例子 原
假如3个页面的例子,第一个是index.html,第二个html文件夹中建2个页面moive_detail.html,第三个演员详情页cast_detail.html,此例子结合vue,主要知识点有页面传值方法,滚动到顶部,下拉刷新上拉加载,vue数据准备与数据绑定,mui接口调用,蒙版使用
tianyawhl
2019/04/04
3.6K0
Vue 实现小小记事本
用户输入后按回车,输入的内容自动保存,下方会显示记录的条数,鼠标移动到文字所在div上,会显示删除按钮,点击按钮,相应记录会被删除,下方的记录条数会相应变化,点击clear,所有记录会被删除。效果如下:
likepoems
2023/03/04
2850
Vue 实现小小记事本
【Vue.js——小游戏】成语学习(蓝桥杯真题-2279)【合集】
选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来。
Rossy Yan
2025/01/25
810
【Vue.js——小游戏】成语学习(蓝桥杯真题-2279)【合集】
Vue核心与实践(五)
title: Vue核心与实践(五) series: Vue核心与实践 abbrlink: cb55f74c date: 2024-04-28 12:39:31
程序员朱永胜
2024/04/30
1170
Vue核心与实践(五)
【Vue】day02-Vue基础入门
所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码
陶然同学
2023/10/14
2400
【Vue】day02-Vue基础入门
VUE2全家桶精讲
概念:Vue (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。
HelloWorldZ
2024/03/20
4690
VUE2全家桶精讲
SpringBoot-10-之初阶整合篇(下)
先看效果:本小例=SpringBoot+MySql+JAP+JQuery+Vue+animate.css+一个我 结果展示.gif 一、自定义的css样式:static/css/my.css
张风捷特烈
2018/09/26
3220
学生抗疫HTML网页设计作品 学生疫情网页模板 大学生抗疫感动专题网页设计作业 HTML学生抗疫网站作业设计
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者
IT司马青衫
2022/08/24
1.1K0
学生抗疫HTML网页设计作品 学生疫情网页模板 大学生抗疫感动专题网页设计作业 HTML学生抗疫网站作业设计
VUE实战—商品控件与购物车联动(9)
在商品组件的<template>标签内完成项目结构,以及数据,事件的绑定,与判断逻辑的书写。
前端大彬哥
2019/07/22
8270
VUE实战—商品控件与购物车联动(9)
mapboxGL列表和地图联动
列表和地图联动是webgis中一个非常常见的功能,本文讲一下在mapboxGL中结合vue如何实现此功能。
牛老师讲GIS
2021/09/10
6580
全新自适应地址发布页HTML源码【手机端】【pc端】
前言 🥇个人主页:@MIKE笔记 🥈文章专栏:网站源码合集 全新自适应地址发布页HTML源码【手机端】【pc端】 源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>发布页_MIKE笔记</title> <meta name="renderer" content="webkit" /> <meta http-equiv="X-UA-Compatible" content="IE=edge">
MIKE笔记
2023/03/23
1.8K0
全新自适应地址发布页HTML源码【手机端】【pc端】
useDynamicList vue 动态列表
动态列表和普通列表的主要区别在于,动态列表内部维护一条自增列表。该列表映射了元素的添加顺序。提供基础列表函数及其他操作工具。 例如: marge等 Uesage <style> *{ margin: 0; padding: 0; } li{ list-style: none; } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz
copy_left
2020/04/30
6690
vue-next-admin可视化demo2 三维地球
演示地址: https://lyt-top.gitee.io/vue-next-admin-preview/#/visualizingDemo2 演示效果: 代码: <template> <div class="visualizing-demo2"> <!-- 顶部 --> <div class="big-data-up"> <div class="up-left"> <i class="el-icon-time mr5"></i> <sp
周星星9527
2021/11/03
9140
vue-next-admin可视化demo2 三维地球
CSS 入门指南:轻松掌握网页布局与样式设计的艺术
CSS(Cascading Style Sheets,层叠样式表)是一种用于为HTML元素添加样式的语言。CSS决定了页面上元素的外观:颜色、字体、布局等。
方才编程_公众号同名
2024/09/24
1470
CSS 入门指南:轻松掌握网页布局与样式设计的艺术
使用SpringBoot + WebSocket实现单人聊天
在做之前,不管在界面布局,还是功能实现方面都下了一点功夫,最终还是一点点实现了,现在就记录一下。
全栈开发Dream
2021/06/08
2.2K0
使用SpringBoot + WebSocket实现单人聊天
相关推荐
【vue学习】3.本地应用——显示切换,属性绑定
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验