VUE中v-for造成数据混乱问题及解决方法

## 关于v-for遍历造成dom数据混乱问题
有关问题图解
首先我们创建一个可以双向交互的列表

<div id="app">
        <form >
            <input type="text" v-model="name">
            <input type="submit"
            value="添加" @click.prevent="add()">
        </form>
        <ul>
            <li v-for='(person,index) in persons'>
                <input type="checkbox">
                <span>{
  {index}}---{
  {person.name}}</span>

            </li>
        </ul>

    </div>
    <script type="text/javascript">
        let app = new Vue({
           el: '#app',
           data:{
                persons:[
                    {name:'小李',id:1},
                    {name:'小王',id:2},
                    {name:'小朱',id:3}