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

小云云
풀어 주다: 2018-01-15 13:21:02
원래의
3677명이 탐색했습니다.

이 글은 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;; 
   },

 


로그인 후 복사

관련 권장 사항:


입력의 확인된 속성 작업 방법을 가져오기 위한 jQuery의 attr 메서드 및 prop 메서드 정보

jquery가 입력 유형의 값을 가져오는 다양한 방법 =text

PHP는 입력 상자의 값을 가져와서 데이터베이스와 비교하여 표시합니다

위 내용은 입력 값을 가져오는 vue에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿