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

Question

数据：

data:{

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

}

通过简单渲染 ：

<ul v-for="item in data.arr">

  <li>{{item.name}}</li>

</ul>

大概意思就这样...

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