vue循环列表点击选中,默认选中第一个

场景:vue循环列表点击选中某个区域,默认选中第一个区域效果

html代码

javascript 复制代码
 <div
                    class="muban_box"
                    v-for="(item, index) in arrTempList"
                    :class="{ act: actBoder == index }"
                    :key="index"
                    @click="show(item, index)"
                  >

js代码:

data数据

javascript 复制代码
actBoder:0

methods方法

javascript 复制代码
show(item, index){
	this.actBoder=index;
}

css

javascript 复制代码
.act{
border:2px solid red;
}
相关推荐
meilindehuzi_a1 小时前
Vue3组件样式隔离与组件通信实战:从 scoped、props 校验到记事本应用
前端·javascript·vue.js
LaughingZhu1 小时前
Product Hunt 每日热榜 | 2026-07-28
前端·神经网络·react.js·搜索引擎·前端框架
陈随易8 小时前
在 VSCode 里,把项目一键部署到服务器
前端·后端·程序员
Highcharts.js8 小时前
教程:基于 React + Highcharts 构建一个单页应用程序、按需数据拉取与图表渲染
开发语言·前端·数据结构·react.js·前端框架·highcharts·页面应用
To_OC9 小时前
我被 useState 坑了两次之后,终于把它的脾气摸透了
前端·javascript·react.js
鱼樱前端9 小时前
我用 Claude Code 后,编码效率翻 3 倍。但更值钱的是别的。
前端·后端·ai编程
_lucas9 小时前
给知识库网站接入AI问答
前端·ai编程·全栈
前端糕手10 小时前
前端面试题大全:JavaScript + Vue3 + React + TypeScript + 工程化 + 性能优化
前端
我不叫武11 小时前
一个用 Rust 写的离线编码查询桌面工具
前端
Web4Browser12 小时前
指纹浏览器 API 自动化怎么接:启动 Profile、获取 CDP 端点并连接自动化框架
前端·网络·typescript·自动化