vue での v-model の動的使用の詳細な説明-jsチュートリアル-php.cn

vue での v-model の動的使用の詳細な説明

php中世界最好的语言

リリース： 2018-04-16 13:38:55

オリジナル

3301 人が閲覧しました

今回は、vue での v-model の動的使用について詳しく説明します。 vue での v-model の動的使用についての注意事項について、実際のケースを見てみましょう。。

前書き:

最近、会社のプロジェクトで、各行に入力と選択があり、サーバーから返されるjsonデータに基づいて行数が動的に変化するという要件があります。そこで問題は、どのようにして v モデルを動的に生成するかということです。

プロジェクトが完了したので、コードを整理して直接投稿しました。

<!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>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

SpringJDBC がバッチでデータを操作する方法

クラスターにメモリを共有させる方法とは何ですか

以上がvue での v-model の動的使用の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。