Explication détaillée de l'utilisation dynamique du v-model dans vue-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-16 13:38:55

original

3348 Les gens l'ont consulté

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>

Copier après la connexion

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!