vue動(dòng)態(tài)生成dom并且自動(dòng)綁定事件

發(fā)布時(shí)間：2020-08-31 00:49:15 來源：腳本之家閱讀：1189 作者：寒山雪人欄目：web開發(fā)

用jquery的時(shí)候你會(huì)發(fā)現(xiàn)，頁面渲染后動(dòng)態(tài)生成的dom，在生成之前的代碼是沒辦法取到相應(yīng)對(duì)象的，必須重新獲取.但是vue基于數(shù)據(jù)綁定的特性讓它能生成的時(shí)候直接綁定數(shù)據(jù)。

html:

<div id="app">
<table v-for="table in tables">
  <tr v-for="row in table.row">
    <td  v-for="item in row">
      <input type="text" v-model="item.val" >
      <div >{{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>

你會(huì)發(fā)現(xiàn)input框輸入的值直接就能在其下面的div里就能改變，直接讀取date里面的數(shù)據(jù)就能獲取相應(yīng)的表格內(nèi)的數(shù)據(jù),可以將其直接使用，ajax發(fā)送不需要使用jquery再次搜索讀取。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

vue動(dòng)態(tài)生成dom并且自動(dòng)綁定事件

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽