简单获取数组中指定元素的索引,和它前面后面所有元素的索引

0 0 javascript
梦っ未忘
梦っ未忘

声望值:174 0人

2019-01-26 15:17:24 提问

关注 0关注

收藏 0收藏, 83浏览

数据:
data:{
    arr:[{name:"apple",price:10},{name:"banana",price:9},{name:"pare",price:9}]
}

通过简单渲染 :
  • {{item.name}}

大概意思就这样...
给每个li添加了点击事件,通过点击某个li,让它自己和它前面li 都设置成灰色的背景色,它后面的就背景色不变,jquery 的话可以用prevAlL()获取当前的元素的前面所有元素,在vue中,要怎么操比较好,能获取到当前元素的前面所有元素和它后面的元素?

请先 登录 后评论

1个回答

  • 闭麦听歌1v9118声望 2018-09-25 09:28

    <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .grey{ background: gray; } </style> </head> <body> <div id="app"> <ul v-for="(item,index) in arr"> <li @click="f($event)">{{item.name}}</li> </ul> </div> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> var temp; var app = new Vue({ el: '#app', data: { arr: [ {name:"apple",price:10, grey:false}, {name:"banana",price:9, grey:false}, {name:"pare",price:9, grey:false}] }, methods: { f(e) { var current = $(e.target).parent().prevAll(); console.log(current); } } }); </script> </body> </html> 通过click事件传入对象$(e.target)能得到li的jquery对象,你循环是加在ul上所以渲染出来是三个<ul><li></li><ul>
    请先 登录 后评论

注册新账号

悬赏追问
10
  • 10
  • 20
  • 50
  • 100
  • 200
  • 输入数值
发布追问