DDR爱好者之家

vue中v-for循环选中点击的元素并对该元素添加样式操作
站长资源 2024/11/24 佚名
53 1538
DDR爱好者之家 Design By 杰米

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

html：

<div v-for = "(item,index) in items" :class = 'addclass:isactive' @click='onclick()'>
 <span>{{item.name}}</span>
</div>

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：

<div v-for = "(item,index) in items" :class = "isactive == index " @click='onclick(index)'>
 <span>{{item.name}}</span>
</div>

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

<template>
<!-- 点击某个绑定样式 -->
 <ul>
  <li v-for="(data, index) in formData" :key="data.id" :class="{active: isActive}" @click="currentInfo(data, index)">name: {{data.name}}，age: {{data.age}}
  </li>
 </ul>

</template>

JavaScript

<script>
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;
      }
    }
  }
}
</script>

Style

<style scoped>
  li {
    list-style: none;
    border: 1px solid #333;
  }
  .active {
    background: light-gray;
  }
</style>

好，于是我兴冲冲地切回页面看效果，结果：

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

当我点击其中的一行时，结果所有的li都绑上了active样式，稍微想一下，相信大家都能找到问题所在，所有li的样式都由一个isActive控制，当我点击一行，全局变量isActive变为ture，当然所有的li都会绑上啦！然后我就停滞下来，思索一番，想过在data数组各项里插入一个标识用来单独控制，但被我否决了，一来对象中插入属性麻烦，二来污染数据源。于是，便有了下面我要说的解决方法：

HTML

<template>
<!-- 点击某个绑定样式 -->
 <ul>
  <li v-for="(data, index) in formData" :key="data.id" :class="currentClass(index)" @click="currentInfo(index)">name: {{data.name}}，age: {{data.age}}
  </li>
 </ul>

</template>

JavaScript

<script>
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 "htmlcode">



<style scoped>
  li {
    list-style: none;
    border: 1px solid #333;
  }
  .active {
    background: light-gray;
  }
</style>





这里，我新建一个变量空间存储当前点击的列表序号index，这样不管怎样点击，这个currentNumber永远是唯一的，那么和它相等的数组项也是唯一的，相等即可绑定active样式了，看效果：


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


好，以上就解决了遍历数组点击动态绑定样式，以后我找到更好的，我会补充，也非常欢迎大家在评论里给出更好的建议。


以上这篇vue中v-for循环选中点击的元素并对该元素添加样式操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米