vue中v-for循环时只处理事件触发项的内容(仅一项)
关于怎样处理vue中v-for循环时对循环内容中单独的一项的事件处理有如下方案:(1)获取v-for循环内容中的下标值(val为navContent中的内容,index为下标) <p v-for="(val,index) in navContent" class="nav"> {{val}} --{
关于怎样处理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);
}
}
更多推荐
所有评论(0)