1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> </head> <body> <div id="root"> <ul> <li v-for="name in names" v-text="name"></li> </ul> <input id="input" type="text" v-model="newName"> <button v-on:click="addName"> Add Name</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script> var dev = new Vue({ el: '#root', data: { names: ['hafiz', 'muhaza', 'spikey'], newName:'', }, methods:{ addName() { this.names.push(this.newName); } } }) </script> </body> </html> |
https://laracasts.com/series/learn-vue-2-step-by-step/episodes/3
