Note: If you have not defined properties and methods directly, it would lead to report xxx is not defined interface can not be displayed properly. I look at the video tutorial teacher can be used directly, and the interface normal display, it might be different versions vue? Unclear
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <!--1.导入Vue的包--> 9 <script src=" https://cdn.jsdelivr.not / NPM / vue " > </script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <div> 15 <label>Id: 16 <input type="text" v-model ="id"> 17 </label> 18 19 <label>Name: 20 <input type="text" v-model="name"> 21 </ Label > 22 23 < the INPUT of the type = "the Button" value = "Add" @click = "the Add" > 24- 25 </ div > 26 <-! Note: v-for cycle time, key attributes intelligent use number Gets String -> 27 <-! Note: key when in use, must be adapted to the form of v-bind attribute binding, specify the value of key -> 28 <! - add key is to ensure that data is unique , association data, to prevent some problems -> 29 30 <! - in the assembly, a v-for cycle time, or in some special cases, if the v-for a problem, it is necessary to use v- for the same time, specify a unique string / numeric types: key value -> 31 <p v-for="item in list": Key = "item.id" > 32 < INPUT type = "CheckBox" > {{}} --- item.id 33 is {{}} item.name, for 34 is </ P > 35 </ div > 36 37 [ 38 is < Script > 39 // Create Vue instance, to give the ViewModel 40 var VM = new new Vue ({ 41 is EL: ' #app ' , 42 is Data: { 43 is ID: '' , 44 is name: '' , 45 List: [ 46 is {ID: . 1 , name: " Li Si ' }, 47 {ID: 2 , name: ' YingZheng ' }, 48 {ID: . 3 , name: ' Zhao Gao ' }, 49 {ID: . 4 , name: ' Han ' }, 50 {ID: . 5 , name: ' Zi ' } 51 ] 52 }, 53 methods:{ 54 add(){//添加方法 55 // this.list.push({id:this.id,name:this.name}) 56 this.list.unshift({id:this.id,name:this.name}) 57 } 58 } 59 }); 60 </script> 61 </body> 62 </html>