vue中动态循环model

时间：2021-12-29 22:44:57

vue动态循环model与angular有所不同，angular直接定义一个数组，然后传入循环列表的index即可。

而vue不仅需要定义一个数组，还需要通过接口读出循环的数组长度，然后在create中先创建出来。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="js/vue.js" ></script>

    </head>

    <body>

        <div id="app">

            <div class="line" v-for="(index,item) in dataModel">

                <input type="text" v-model="dataModel[index].value1" />

                <span>{{dataModel[index].value1}}</span>

                <button v-bind:data-index="index" v-on:click="submitClick">提交</button>

                <input type="text" v-model="dataModel[index].value2" />

                <span>{{dataModel[index].value2}}</span>

            </div>

        </div>

    </body>

    <script src="https://h5.u51.com/99fenqi/vue/common/vue.min.js"></script>

    <script>

        var app = new Vue({

            el: "#app",

            data: {

                // 创建一个空的数组

                dataModel: []

            },

            created: function(){

                // 这里是动态生成v-model,这个可以放在网络请求成功里面;

                var len = 4;

                for (var i = 0; i < len; i ++) {

                    var item = {value1: '',value2: ''};

                    this.dataModel.push(item);

                }

            },

            methods: {

                // 显示v-model里面的数据

                submitClick: function(event){

                    var tag = event.target;

                    var index = tag.getAttribute('data-index');

                    alert(this.dataModel[index].value1);

                }

            }

        })

    </script>

</html>

参考文章：http://blog.csdn.net/zhuming3834/article/details/70170305

相关文章