vue에서 v-bind와 v-model의 차이점은 무엇입니까

차이점: 1. "v-bind"는 단방향 바인딩인 반면 "v-model"은 양방향 바인딩입니다. 2. "v-bind"는 vue의 데이터만 페이지에 동기화할 수 있지만 " v-model"은 Vue의 데이터를 페이지에 동기화할 수 있을 뿐만 아니라 사용자 데이터를 Vue의 속성에 할당할 수도 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

v-model과 v-bind의 차이점:

1. v-bind는 데이터, 속성 및 표현식을 바인딩하는 데 사용되는 단방향 바인딩이며 vue의 데이터만 페이지에 동기화할 수 있습니다. .

2. v-model은 vue의 데이터를 페이지에 동기화할 수 있을 뿐만 아니라 vue의 속성에 사용자 데이터를 할당할 수도 있는 양방향 바인딩입니다.

3. v-bind는 모든 속성에 값을 할당할 수 있는 반면, v-model은 값 속성이 있는 요소에 대해서만 양방향 데이터 바인딩을 수행할 수 있습니다.

1. v-model

v-model은 양식 요소에 대해 양방향 바인딩을 생성하고 컨트롤 유형에 따라 요소를 업데이트하는 올바른 방법을 선택합니다. and selected

1. 텍스트 바인딩

<input type="text" v-model="val" />
<p> {{val}} </p>

2. 라디오 바인딩

<input type="radio" value="one" v-model="radioVal" />
<input type="radio" value="two" v-model="radioVal" />
<label for v-bind="radioval" />

radioval 값은 라디오 버튼의 값이 선택됨에 따라 1 또는 2가 됩니다

3. checkBox 바인딩

(1) 싱글. 체크박스, 최종값은 논리값 true와 false입니다

<input type="checkbox" v-model="checkVal"/>
<label for="checkbox">{{checkVal}}</label>

(2) 체크박스가 여러 개인 경우 값을 배열로 바인딩합니다

<input type="checkbox" value="apple" v-model="checkArray"/>
<label for="checkbox">{{apple}}</label>

<input type="checkbox" value="banana" v-model="checkArray"/>
<label for="checkbox">{{banana}}</label>

<input type="checkbox" value="pear" v-model="checkArray"/>
<label for="checkbox">{{pear}}</label>

<span>{{checkArray | json}}</span>

checkArray의 값은 선택 여부에 따라 그에 따라 변경됩니다

4. 선택 바인딩

(1) 단일 선택에 바인딩
(2) 여러 선택을 바인딩할 때 배열에도 동일하게 적용됩니다

5. 매개변수 추가

(1) 게으른

입력 상자 변경 입력 이벤트가 변경 이벤트로 변경되어 입력 상자가 입력 대신 변경 이벤트에서 업데이트됩니다

변경 이벤트와 입력 이벤트의 차이점에 대해 간단히 설명하면 다음과 같습니다.

변경 이벤트는 다음 이후에 트리거되어야 합니다. 입력 상자가 초점을 잃습니다. 입력 이벤트를 실시간으로 모니터링할 수 있습니다.

(2)number

텍스트 상자에 입력된 값을 숫자로 변경합니다. NAN 다음에 숫자로 변경된 경우 원래 값을 반환합니다.

(3)trim

앞뒤 공백을 제거합니다. 입력 문자열

---

2. 텍스트 바인딩

v-bind를 직접 사용하거나 {{}}

<p v-bind="message"></p>
<p>{{message}}</p>

2.바인드 표현식

<p v-bind:src="http://...."></p>
<p v-bind:class="http://...."></p>
<p v-bind:style="http://...."></p>

4. 바인딩 html

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

이때 세 개의 {}를 사용해야 합니다더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오를 방문하세요! !

위 내용은 vue에서 v-bind와 v-model의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!