关于怎样处理vue中v-for循环时对循环内容中单独的一项的事件处理有如下方案:
(1)获取v-for循环内容中的下标值(val为navContent中的内容,index为下标)
<p v-for="(val,index) in navContent" class="nav">
{{val}} --{{index}}
<i class="el-icon-arrow-right right"></i>
</p>
data () {
return {
navContent:[
"红色",
"蓝色",
"绿色",
"白色",
"黑色",
"紫色"
]
}
(2)事件处理函数的传参(参数即为下标值)
核心部分:@click="change(index)"
完整代码:
<p v-for="(val,index) in navContent" class="nav" @click="change(index)">
{{val}} --{{index}}
<i class="el-icon-arrow-right right"></i>
</p>
(3)处理点击操作的事件
methods: {
change(index) {
//具体处理的方法
alert(index);
}
}