Maison > Article > interface Web > Explication détaillée de l'utilisation dynamique du v-model dans vue

Explication détaillée de l'utilisation dynamique du v-model dans vue

php中世界最好的语言original: 2018-04-16 13:38:553319parcourir

Cette fois, je vais vous apporter une explication détaillée de l'utilisation dynamique de v-model en vue Quelles sont les précautions pour l'utilisation dynamique de v-model en vue. Ce qui suit est un cas pratique. Jetons un coup d'oeil.

Avant-propos :

Récemment, dans un projet d'entreprise, il existe une telle exigence. Chaque ligne a 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: '',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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment SpringJDBC exploite les données par lots

Quelles sont les méthodes pour que le cluster partage la mémoire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php json select input

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment SpringJDBC exploite les données par lotsArticle suivant：Comment SpringJDBC exploite les données par lots

Articles Liés

Voir plus