vue中v-for循环选中点击的元素并对该元素添加样式

痛定思痛。 2022-01-30 01:49 347阅读 0赞

### 相信大家都会遇到这种情况：v-for循环时，我只需要点击到的元素做出相应反应，其他的元素不变；但是往往所有v-for循环出的元素都会变化。如下面的代码：我需要点击到的元素添加一个类样式，其他元素不变，但是这样会导致所有的元素都会变化 ###

### 解决方法：使用index索引，当点击一个元素时，将该元素的index索引赋给类样式的启用变量，如果该变量和index相等时，则启用该类样式 ###

<template>  
<view>  
<view v-for="(item,index) in items" :class="isactive == index ? 'addclass' : '' " @click='onclick(index)' class="fruits">  
<text>\{ \{item.name\}\}</text>  
<text>\{ \{item.price\}\}</text>

</view>  
</view>  
</template>

<script>  
export default \{

data() \{  
return \{

items: \[\{  
name: '苹果',  
price: '5$'  
\},  
\{  
name: '香蕉',  
price: "3$"  
\},  
\{  
name: '西瓜',  
price: '4$'  
\},  
\{  
name: '桃子',  
price: '3$'  
\},  
\{  
name: '草莓',  
price: "6$"  
\},  
\{  
name: '樱桃',  
price: '10$'  
\},

\],  
isactive: false

\}

\},  
methods: \{  
onclick(index) \{  
console.log(index)  
//将点击的元素的索引赋值给bian变量

this.isactive = index  
\}

\}  
\}  
</script>

<style>  
  
.fruits \{  
margin: 50upx;  
\}  
  
.addclass \{  
color: red;  
\}  
</style>

发表评论取消回复

表情：

评论列表（有 0 条评论，347人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue选中点击的元素_用vue2.0实现点击选中active，其他选项互斥的效果

在正常的js中。我们如果要实现点击选中active然后其他取消的效果，我们可以定义一个类，当点击的时候给给多有的dom取消active的类，给当前元素加上这个类名，说的很啰嗦，

小咪咪/ 2023年01月01日 05:58/ 0 赞/ 163 阅读

相关 uni-app 点击切换列表元素样式

列表滚动使用视图滑动组件：[文档][Link 1] 切换样式使用动态class或者style来绑定：[文档][Link 2] demo示例 ![在这里插入图片描述][

深碍√TFBOYSˉ_/ 2022年12月29日 11:25/ 0 赞/ 477 阅读

相关 vue选中或点击输入框，边框高亮；vue选中或点击元素，当前元素背景高亮

1、vue 选中或点击输入框，边框高亮 ①：输入框动态绑定一个class，例`login-box-focus`，如下： :class="{ 'login-box-f

水深无声/ 2022年10月28日 03:43/ 0 赞/ 572 阅读

相关 vue 中动态添加html元素并绑定点击事件onclick

方法中动态添加html元素 getWindContent(){ return `</div> <span style="curs

「爱情、让人受尽委屈。」/ 2022年10月10日 11:29/ 0 赞/ 1324 阅读

相关如何实现动态添加的元素添加点击事件

![9aa0df152e5b0a7e4af4ecc8c8ca05e7.png][] 在页面开发过程中常常遇到需要动态添加元素，然后给这一元素绑定相关事件的情况，这种情况下一般

心已赠人/ 2022年09月16日 14:25/ 0 赞/ 297 阅读

相关 JointJS点击选中元素高亮显示

使用 JointJs 时，当我们点击了选中的元素时，如果我们需要对点击元素高亮显示，点击空白处取消高亮显示的话，可以继续往下看代码实现。官方文档相关部分： [highl

心已赠人/ 2022年08月31日 12:23/ 0 赞/ 266 阅读

相关【VUE组件开发】VUE随意点击列表元素切换选中样式，并有序数组添加索引和数值

直接查看代码以及样式 <template> <div>  <div clas

朴灿烈づ我的快乐病毒、/ 2022年05月15日 09:40/ 0 赞/ 176 阅读

相关 Vue v-for循环之@click点击事件获取元素

应用背景浏览论坛的贴子（数据库的数据通过vue遍历在html页面上）点击帖子的标题、图片，可以查看详细的帖子（点击事件获取id） ----------------

女爷i/ 2022年02月27日 16:42/ 0 赞/ 345 阅读

相关 vue中v-for循环选中点击的元素并对该元素添加样式

相信大家都会遇到这种情况：v-for循环时，我只需要点击到的元素做出相应反应，其他的元素不变；但是往往所有v-for循环出的元素都会变化。如下面的代码：我需要点击到的元素添加

痛定思痛。/ 2022年01月30日 01:49/ 0 赞/ 348 阅读

相关 vue 实现点击“增加“”按钮，添加一个HTML元素

vue 实现点击“增加“”按钮，添加一个HTML元素场景描述：vue中经常需要点击一次增加按钮，添加一个HTML元素，比如一个div。初始状态： ![waterm

布满荆棘的人生/ 2021年07月24日 13:53/ 0 赞/ 1895 阅读