vue動態產生dom並且自動綁定事件，vue動態dom綁定

vue動態產生dom並且自動綁定事件，vue動態dom綁定

用jquery的時候你會發現，頁面渲染後動態產生的dom，在產生之前的代碼是沒辦法取到相應對象的，必須重新擷取.但是vue基於資料繫結的特性讓它能產生的時候直接綁定資料。

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">添加2x2的表格</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>

你會發現input框輸入的值直接就能在其下面的div裡就能改變，直接讀取date裡面的資料就能擷取相應的表格內的資料,可以將其直接使用，ajax發送不需要使用jquery再次搜尋讀取。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。