Vue dynamically generates dom and automatically binds events. vue dynamically binds dom

Vue dynamically generates dom and automatically binds events. vue dynamically binds dom

When using jquery, you will find that the dom dynamically generated after page rendering cannot be obtained from the code before it is generated and must be retrieved again. however, based on the data binding feature, vue enables it to directly bind data when it is generated.

Html:

<Div id = "app"> <table v-for = "table in tables"> <tr v-for = "row in table. row "> <td style =" width: 80px; float: left "v-for =" item in row "> <input type =" text "v-model =" item. val "style =" width: 40px "> <div style =" width: 40px; float: left ">{{ item. val }}</div> </td> </tr> </table> <button v-on: click = "add"> add a 2x2 Table </button> </div>

Js:

<script src="https://unpkg.com/vue/dist/vue.js"></script><script type="text/javascript">    var vm = new Vue({   el : "#app",   data:{    tables : []   },   methods:{      add:function(){      row = [];      rmax = 2;      cmax = 2;       for( i = 0; i < rmax; i++){        column = [];        for( f = 0; f < cmax; f++){          column = column.concat({              val:"",          });        }        row.push(column);      }       this.tables.push({        row:row,      });    }  }   });</script>

You will find that the input value in the input box can be changed directly in the div below, and the data in the date can be directly read to obtain the data in the corresponding table, it can be used directly, and ajax sending does not need to be searched and read again using jquery.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.