집 >웹 프론트엔드 >JS 튜토리얼 >vue에서 v-model의 동적 사용에 대한 자세한 설명

vue에서 v-model의 동적 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-16 13:38:553366검색

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!