<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial-scale =1.0"> <title> V-model two-way binding </title> <script SRC = "https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js" > < / script > < / head > < style > * {padding: 0; margin: 0; } #v-model { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; width: 100%; height: 200px; } </style> <body> <div id="v-model"> <h3> V-model bidirectional binding base code </h3> <! <input type="text" :value='name' @input="changeModel" > <! - < input type = "text" : value = 'name' @ input = "name = $event. The target. The value" > the second way - > < p > {{name}} < / p > < / div > < script > let vm = new Vue({ el: "#v-model", data(){ return{ name:'LBJ' } }, ChangeModel (event){this.name = event.target.value}}}) </script> </body> </ HTML >Copy the code

The above code is how to use v-bind and the event object method to achieve v-model two-way binding effect, of course, I suggest you look at the source code, incidentally I next article is, ha ha ha. In simple terms, V-model is a two-way data binding, whereas V-bind is a one-way binding, and there are many types of binding, such as objects, and all attributes (SRC, class, etc.).