1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <script src="./lib/vue.js"></script>
    10. </head>
    12. <body>
    14.     <div id="app">
    15.         <div>
    16.             <label>
    17.                 id:<input type="text" v-model="id">
    18.             </label>
    19.             <label>
    20.                 Name:<input type="text" v-model="name">
    21.             </label>
    22.             <input type="button" @click="add" value="添加">
    23.         </div>
    25.         <!-- v-for循环的时候,key属性只能使用number获取string. key使用的时候必须用v-bind或者简写: 指定key的值 -->
    26.         <!-- v-for有问题,必须在key指定一个唯一的值(number/string). -->
    27.         <p v-for="(item, index) in list" :key="item.id">
    28.             <input type="checkbox">{{item.id}} {{item.name}}
    29.         </p>
    30.     </div>
    31.     <script>
    32.         var vm = new Vue({
    33.             el: '#app',
    34.             data: {
    35.                 id:'',
    36.                 name:'',
    37.                 list: [
    38.                     { id: 1, name: "曹操" },
    39.                     { id: 2, name: "吕布" },
    40.                     { id: 3, name: "诸葛亮" },
    41.                     { id: 4, name: "夏侯惇" },
    42.                     { id: 5, name: "吕伟" },
    43.                     { id: 6, name: "夏侯渊" },
    44.                 ]
    45.             },
    46.             methods: {
    47.                 add(){
    48.                     this.list.push({id:this.id,name:this.name})
    49.                 }
    50.             }
    51.         });
    52.     </script>
    53. </body>
    55. </html>

    1.gif