vue选中点击的元素_vue中v-for循环选中点击的元素并对该元素添加样式操作
相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变;但是往往所有v-for循环出的元素都会变化。如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变,但是这样会导致所有的元素都会变化
html:
{{item.name}}
css:
.addclass{
color : red;
}
js:
data:{
items :[
{
name :'apple',
price: '5$'
},
{
name:'banana',
price:"3$"
},
{
name:'pear',
price:'4$'
}
],
isactive : false
}
onclick(){
this.isactive = true
}
解决方法:使用index索引,当点击一个元素时,将该元素的index索引赋给类样式的启用变量,如果该变量和index相等时,则启用该类样式
html:
{{item.name}}
css:
.addclass{
color : red;
}
js:
data:{
items :[
{
name :'apple',
price: '5$'
},
{
name:'banana',
price:"3$"
},
{
name:'pear',
price:'4$'
}
],
isactive : -1
}
onclick(index){
//将点击的元素的索引赋值给bian变量
this.isactive = index
}
补充知识:v-for 遍历数组点击动态绑定样式
这可能是一个对于任何js开发者来说都非常简单的问题,或者根本谈不上被叫做“问题”,“基操”而已。但是,很遗憾,我为此开了个篇幅简略记录下它,因为这是我处于前端开发基础阶段数次阻滞过我的问题,以下暂提供一种解决方案,后续可能补充。
这类问题多见于单页面应用(SPA)中的侧边栏、表格列等,当我曾拿到这个需求时,我以为我能用Vue中介绍的Class动态绑定来解决,事实上的确如此,但我用错了,请看我错误的解决方法:
HTML
- name: {{data.name}},age: {{data.age}}
JavaScript
export default {
name: 'classActive'
data() {
return {
isActive: false, // 用来判断active样式类是否显示
formData: [{
id: 1,
name: 'zhangsan',
age: 20
},{
id: 2,
name: 'lisi',
age: 21
},{
id: 3,
name: 'wangwu',
age: 22
}
}
}
methods: {
currentInfo(data, index) {
if(data.id-1 === index) { // 当前选择的列表项与列表id号相等则绑定active
this.isActive = true;
}
}
}
}
Style
li {
list-style: none;
border: 1px solid #333;
}
.active {
background: light-gray;
}
好,于是我兴冲冲地切回页面看效果,结果:
当我点击其中的一行时,结果所有的li都绑上了active样式,稍微想一下,相信大家都能找到问题所在,所有li的样式都由一个isActive控制,当我点击一行,全局变量isActive变为ture,当然所有的li都会绑上啦!然后我就停滞下来,思索一番,想过在data数组各项里插入一个标识用来单独控制,但被我否决了,一来对象中插入属性麻烦,二来污染数据源。于是,便有了下面我要说的解决方法:
HTML
- name: {{data.name}},age: {{data.age}}
JavaScript
export default {
name: 'classActive'
data() {
return {
currentNumber: 0, // 用来判断active样式类是否显示
formData: [{
id: 1,
name: 'zhangsan',
age: 20
},{
id: 2,
name: 'lisi',
age: 21
},{
id: 3,
name: 'wangwu',
age: 22
}
}
}
methods: {
currentInfo(index) {
this.currentNumber = index;
},
currentClass(index) {
return [this.currentNumber == index ? 'active' : ''];
}
}
}
Style
li {
list-style: none;
border: 1px solid #333;
}
.active {
background: light-gray;
}
这里,我新建一个变量空间存储当前点击的列表序号index,这样不管怎样点击,这个currentNumber永远是唯一的,那么和它相等的数组项也是唯一的,相等即可绑定active样式了,看效果:
好,以上就解决了遍历数组点击动态绑定样式,以后我找到更好的,我会补充,也非常欢迎大家在评论里给出更好的建议。
以上这篇vue中v-for循环选中点击的元素并对该元素添加样式操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
时间: 2020-07-14
vue选中点击的元素_vue中v-for循环选中点击的元素并对该元素添加样式操作相关推荐
- a标签 vue 动态点击_vue 中a标签如何实现点击赋值
vue 中a标签如何实现点击赋值 发布时间:2020-11-04 16:56:07 来源:亿速云 阅读:165 vue 中a标签如何实现点击赋值方式?相信很多没有经验的人对此束手无策,为此本文总结了问 ...
- vue 相同的id不合并_vue中key的作用
摘要 本文结合源码说明了key的作用,给出了一个不写key的反例,并分析了原因. 内容 key的作用 不写key会出的bug及原因分析 key的实践方案 key的作用 在数据变化前后,vue会得到两个 ...
- vue手机端布局纵向布局_Vue中的黄金布局集成
vue手机端布局纵向布局 金色的布局 (vue-golden-layout) Integration of the golden-layout to Vue. 将黄金布局整合到Vue. 安装 (Ins ...
- vue模板字符串标签动态参数_Vue中的字符串模板的使用
1.HTML模板和字符串模板 HTML模板:直接在HTML页面挂载的模板.(即非字符串模板) 非字符串模板:在单文件里用 指定的模板,换句话说,写在 html 中的就是非字符串模板. 字符串模板:在j ...
- vue 怎么全局到入常量_Vue 中如何定义全局的变量和常量(转)
17.6k 次阅读 · 读完需要 10 分钟 7 Vue 中如何定义全局的变量和常量 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入. 尝试1: 创建 gl ...
- ref获取元素 vue 删除子元素_vue中的 ref 和 $refs
相信前端开发或者后端开发都用过jquery,因为不是数据驱动,为了获取某些元素的value值,都操作过Dom元素. // 使用Jquery获取Dom元素值$("#id").text ...
- vue中怎么点击修改文字_vue中如何实时修改输入的值
vue中如何实时修改输入的值 经常看到需要对用户输入的值进行实时修改,有时是需要修改为指定的展示内容,有时候是用来校验,禁止用户输入非法数据,总之是一个常见的需求吧,只是自己一直没有特意去关注.思来想 ...
- vue获取table一列数据_vue中比较重要的小知识点
1.$nextTick的用法 ①解决的问题: 一.element-ui中的对话框中的元素通过this.$refs获取不到 二.第一次进入路由created()中操作DOM元素undefined 三.后 ...
- vue怎么实现右键二级菜单_vue中如何自定义右键菜单详解
在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: v-for="item in resourceList" :key="item.id&qu ...
最新文章
- ORACLE表空间管理维护
- effective java ---读书笔记一
- 函数式接口的概念函数式接口的定义
- 10-对象属性的获取方式
- 使用jQuery发送POST,Ajax请求返回JSON格式数据
- windows离线安装grunt_chrome火狐离线安装包下载
- Unity Android DLL热更
- 【Git入门之六】远程仓库
- 在Web页面中控制其元素的选择状态
- timesten mysql_timesten内存数据同步创建
- 华三(H3C)无线控制器AC如何登录到FIT-AP
- 【OpenCV】Retinex图像增强(SSR,MSR,MSRCR)
- 一文带你了解Serverless架构及应用场景
- 微分的概念和微分的基本公式与运算法则
- 安卓系统监控任务管理器App推荐
- VR全景拍摄怎么设置相机
- Word中图表的编号制作和引用编号
- 解读两篇最新多元时间序列预测工作
- 在jsp引入bootstrap
- python如何生成多个随机数的列表
热门文章
- 《Oracle comment on注释信息方法论》
- VC程序中运行其他程序的三种方法
- 续——《RedHat/Fedora等非ubuntu的Linux系统星空极速netkeeper拨号上网 》
- dotnet程序优化心得(三)
- 批量删除table或view
- 伪代码就是计算机语言 正确吗,伪代码实例绍.ppt
- react table里跳转页面_react路由配置基础篇:react-router4.0及以上
- 执行 link.exe 时出错_在20多岁时应该做什么,以避免在30多岁和40多岁时后悔?...
- Python | 从用户输入数据,保存到文件,读取并打印
- kafka偏移量保存到mysql里_【队列】调试应用时进行的kafka偏移量调整