vue动态生成dom并且自动绑定

vue动态生成dom并且自动绑定

vue动态生成dom并且绑定

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再次搜索读取。
具体原因看这个vue的生命周期图：
![http://cn.vuejs.org/v2/guide/instance.html#生命周期图示](http://cn.vuejs.org/images/lifecycle.png)

如果操作某一个input

以设置只读为例：

1. 全部input只读在示例的input中添加readOnly=true即可
2. 如果只是某个input 参考下面：

---

使用vue控制可以在concat的时候给每个input添加一个变量（比如read）用于控制它的readOnly

 column = column.concat({
                            val:"",
                            read:false
                    });

然后在在input中加上v-bind:readOnly=”item.read”

<input type="text" v-model="item.val" v-bind:readOnly="item.read" style="width:40px">

使用方式：

this.tables[tableIndex].row[rowIndex][columnIndex].read = true

---

当然也可以使用纯js：

setOnlyread:function(index){
    var inputElements=document.getElementsByTagName("input");
    if(inputElements[index])inputElements[index].readOnly=true;
}