1、v-for的作用域

<tempalte>
  <div>
   <div v-for="(item, index) in list" :key="index">
    <span>姓名：{{ onChangeList(item).name }}</span>
    <span>年龄：{{ onChangeList(item).name }}</span>
   </div>
  </div>
</template>

exports defalut{
 data() {
  return {
   list: [
    { name: '王1'， age: 22 },
    { name: '王2'， age: 23 }
   ]
  }
 }，
 methods: {
  onChangeList(data) {
   // 如果对传入的data进行修改，再返回一个新的值时需要返回一个新的数据（newData）
   let newData = {}
   newData ['name'] = data.name + '改'
   newData 'age'] = data.age + 1
   return newData 
  }
 }
}

以上方法onChangeList方法需要重新return一个新的值。如果直接使用原来的值会导致前端报错。

创建人：yinyanting

快速跳转