Vue2 数据双向绑定：数组对象定义及用法

<template>
  <div>
    <ul>
      <li v-for='(item, index) in list' :key='item.id'>
        <input type='text' v-model='item.name'>
        <input type='checkbox' v-model='item.checked'>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Apple', checked: false },
        { id: 2, name: 'Banana', checked: true },
        { id: 3, name: 'Orange', checked: false }
      ]
    }
  }
}
</script>
<p>在Vue2中，可以通过在data中定义一个数组，该数组中的每个元素都是一个对象，然后在模板中使用v-model指令来实现双向绑定。例如：</p>
<p>在这个例子中，我们定义了一个名为list的数组，其中每个元素都是一个对象，包含id、name和checked三个属性。在模板中，我们使用v-for指令遍历list数组，对于每个元素，我们使用v-model指令来实现对name和checked属性的双向绑定。这样，当用户在输入框中输入内容或勾选复选框时，list数组中相应元素的name和checked属性会自动更新，反之亦然。</p>