vue中v-for循环时只处理事件触发项的内容（仅一项）

关于怎样处理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);
   }
  }