Explication détaillée de la génération dynamique du v-model dans vue-js tutoriel-php.cn

Explication détaillée de la génération dynamique du v-model dans vue

小云云

Libérer： 2018-01-20 10:55:20

original

2547 Les gens l'ont consulté

Cet article présente principalement des informations pertinentes sur les exemples détaillés de v-model générés dynamiquement dans vue. J'espère que cet article pourra aider tout le monde à comprendre et à maîtriser cette partie du contenu. J'espère qu'il pourra s'y référer. aider tout le monde.

Explication détaillée d'exemples de génération dynamique de v-model dans vue

Avant-propos :

Récemment travaillé dans une entreprise Dans le projet, il existe une telle exigence que chaque ligne ait une entrée et une sélection, et le nombre de lignes change dynamiquement en fonction des données json renvoyées par le serveur. La question est donc de savoir comment générer dynamiquement un modèle en V ?

Maintenant que le projet est terminé, je l'ai réglé et posté le code directement.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/vue.js" ></script>
  </head>
  <body>
    <p id="app">
      <p class="line" v-for="(item,index) 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>
      </p>
    </p>
  </body>
  <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: &#39;&#39;,value2: &#39;&#39;};
          this.dataModel.push(item);
        }
      },
      methods: {
        // 显示v-model里面的数据
        submitClick: function(event){
          var tag = event.target;
          var index = tag.getAttribute(&#39;data-index&#39;);
          alert(this.dataModel[index].value1);
        }
      }
    })
  </script>
</html>

Copier après la connexion

Rendu :