입력 값을 가져오는 vue에 대한 자세한 설명-JS 튜토리얼-php.cn

입력 값을 가져오는 vue에 대한 자세한 설명

小云云

풀어 주다： 2018-01-15 13:21:02

원래의

3667명이 탐색했습니다.

이 글은 Vue가 입력값을 얻는 문제를 해결하는 방법에 대한 관련 정보를 주로 소개합니다. 이 글이 모든 사람에게 도움이 되기를 바라며, 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

vue가 입력 값을 얻는 문제에 대한 해결책

v-for에는 여러 줄의 입력 입력 상자가 있습니다. vue는 어떻게 특정 줄의 입력 값을 얻나요? 목록 모음이 백그라운드에서 여러 줄로 반환되면 페이지에 여러 줄 입력 상자가 표시되고 행 값을 수정할 때 확인이 수행됩니다. 오류가 발생하기 쉬운 프롬프트를 입력할 때 끝에 지우기 버튼을 추가하고 클릭합니다. 현재 데이터 행을 지우려면 초기 아이디어는 v-bind: 값 바인딩 값을 사용하는 것이므로 페이지에 입력된 값을 얻을 수 없는 상황이 발생하고 v-bind는 원본 값을 수정하지 않습니다. list이고 ref는 동적으로 바인딩할 수 없고 ref는 전체만 얻을 수 있고, 모든 입력 상자의 값을 가져오는 this.$refs.itemPriceRef[]는 배열이고 제출 전에 확인할 수 있지만 Vue는 특정 라인의 동작을 판단할 수 없으며, Vue는 DOM 요소를 매우 제대로 작동하지 않습니다. N개의 정보를 검색한 결과 값을 얻는 방법을 찾을 수 없었습니다. 이렇게 하면 목록의 값이 수정 시 바로 수정되며, VUE가 바인딩되어 있어서 입력된 값이 원래 값과 다른 문제가 발생하지 않아 매우 편리합니다. 방금 Vue를 배우기 시작했는데 이 방법이 익숙하지 않아서 시간이 많이 낭비되었지만 많은 것을 배웠습니다.

PS: 페이지에서 입력 상자의 값을 가져오는 3가지 방법을 요약하면 1은 v-bind:value + ref를 사용하는 것입니다.

예를 들어 로그인 페이지에만 적합합니다. 계정과 비밀번호가 있습니다.

2는 v-model을 사용하여 얻습니다. 이 방법은 원래 목록 값을 수정하므로 제출할 때 원래 목록을 탐색해야 하는데

3을 얻습니다. v-model + ref를 사용하는 것이 저입니다. 이렇게 작성했는데 2와 다른 점은 제출할 때 ref를 직접 사용하여 값을 알 수 없는 경우에 더 유용하다고 생각합니다. 그냥 아무렇지도 않게 요약한 것인데, 전문가의 눈에는 언급할 가치도 없을 것 같지만, Vue를 이제 막 배운 사람으로서는 정말 오랜 시간이 걸렸습니다.

시간을 내어 녹음해 보고 깊은 인상을 남겨보세요.

<p v-model="skuList" v-for="(val, key) in skuList "> 
<p> 
<p> 
<span>价格：</span> 
<span><input type="text" v-model="val.price" ref="priceRef" v-on:change="checkPrice(val)"></span>

로그인 후 복사

<pre name="code" class="html"><i v-on:click="dataClearStockPrice(val)"></i>

上限： >

<span style="font-family:Arial, Helvetica, sans-serif;"><i v-on:click="dataClearStockTotal(val)"></i> 
</span></p> 
</p> 
</p>

    checkPrice:function (data) { 
    var priceReg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/; 
    if(!priceReg.test(data.price)){ 
     Toast({message: "格式错误"}); 
     data.price = ""; 
    } 
   }, 
   checkStock:function (data) { 
    var totalReg = /^[0-9]*$/; 
    if(!totalReg.test(data.stock)){ 
     Toast({message: "格式错误"}); 
     data.stock = ""; 
    } 
   }， 
   dataClearStockPrice:function(data){ 
    data.price = &#39;&#39;; 
   }, 
   dataClearStockTotal:function(data){ 
    data.stock = &#39;&#39;; 
   },

로그인 후 복사