vue에서 v-model과 v-bind 귀속 데이터의 공통점과 차이점을 상세히 풀다
v-bind, 그리고 하나는 v-model입니다.{{name}}의 형식은 비교적 이해하기 쉽다. 바로 텍스트의 형식과 실례 데이터에 대응하는 속성으로 귀속되는 것이다.예:
var app = new Vue({
el: '#app',
template: '<div @click="toggleName">{{name}}</div>',
data: {
name: 'tom',
},
method: {
toggleName() {
this.name = this.name === 'tom' ? 'sony' : 'tom'
},
},
})그러나
v-bind과v-model 이 두 가지 귀속은 구분하기 어렵다. 특히 표 요소에서 처음에는 도대체 어떻게 사용해야 하는지 헷갈린다.v-bind
먼저 v-bind를 보면 그 용법은 뒤에 짝짓기를 하고 html 요소의attributions를 따라가는 것이다. 예를 들어
<p v-bind:class="classed">v-bind:를 더하면 달라집니다.그것의 값classed는 문자열이 아니라 vue 실례에 대응하는 데이터입니다.classed의 이 변수.그러니까 데이터.classed가 어떤 값인지, 데이터로 class 속성에 어떤 값을 전달합니다.classed가 변화할 때class 속성도 변화한다. 이것은 css를 통해 애니메이션 효과를 실현하는 장소에 매우 적합하다.class를 제외하고 다른 대부분의 html 원시적인 속성은 이런 방식으로 귀속할 수 있고 편의를 위해 직접 사칭 형식으로 줄일 수 있다. 예를 들어
var app = Vue({
el: '#app',
template: '<img :src="src">',
data: {
src: '',
},
beforeMount() {
fetch(...).then(...).then(res => this.src = res.src) // data.src
},
})
v-model
v-model은 주로 폼 요소에 사용되며 양방향 연결을 실현합니다.쌍방향 귀속은 모두가 잘 알고 있다. 간단하게 말하면 기본적인 상황에서 위의 두 가지 상황의 데이터 귀속과 같은 실례적인 데이터이다.name가 변할 때 대응하는 시도에서도 변합니다.그러나 v-model이 귀속되면 반대로 input에 새로운 내용을 수동으로 입력하고 데이터를 수정합니다.name의 값, 보기에서 다른 곳에서 데이터를 사용했다면.name, 그럼 이곳은 데이터 때문에.name의 변화로 인해 변화하여 관련 동적 효과를 실현합니다.다음은 밤을 들자.
var app = Vue({
el: '#app',
template: '<label><input v-model="name">{{name}}</label>',
data: {
name: '',
},
})v-model은 양방향 귀속입니다. 그러면 귀속된 요소는 값을 바꿀 기회가 있어야 합니다.그래서 실제로 v-model은 기본적으로 input,textarea,select 등 폼 요소에만 사용된다.
v-bind와 v-model 혼용
v-bind와 v-model을 함께 사용해야 하는 경우도 있습니다.이럴 때 조심하지 않으면 상황을 어지럽히고 어디를 어떻게 통제해야 할지 분간할 수 없다.밤을 들다.
<input :value="name" v-model="body">실제로 그들의 관계는 위의 논술과 같다. v-bind가 발생하는 효과는 양방향 귀속을 포함하지 않기 때문에value의 효과는 input의value 속성 값을 데이터와 같게 하는 것이다.name의 값, v-model의 효과는 input와 데이터입니다.body는 양방향 연결을 설정합니다. 따라서 우선 데이터입니다.body의 값은 input의value 속성을 주고 그 다음에 input에 입력한 값이 변할 때 데이터입니다.바디는 또 따라 바뀐다.
지금의 문제는 이 두 개를 함께 사용할 때 누구나 우선순위가 높다는 것이다.누가 무효입니까?실험에 의하면 v-model이 사용될 것입니다. v-bind는 이때 무효입니다. 왜냐하면value 속성에 연결되어 있기 때문에 다른 속성에 묶이면 v-bind는 영향을 받지 않습니다.이런 상황에서 v-bind는 데이터를 수정하더라도 효력을 상실합니다.name, input에는 아무런 변화가 없습니다.
이것 또한 v-model이 구축한 쌍방향 귀속은 입력형 요소인 input,textarea,select 등에 우선권을 가지고 쌍방향 귀속을 강제적으로 실행할 수 있음을 설명한다. 원한다면.
이것은 단독 input에서 v-bind와 v-model을 동시에 사용하는 것은 필요하지 않지만 충돌을 일으키지 않는다는 것을 설명한다.
위에서 내가'단독'이라고 말한 것을 주의해라. 즉, 한 조의 입력에서 그것들은 또 다른 논점을 해야 한다는 것이다.한 그룹의 입력에는 라디오 그룹, 체크 그룹, 드롭다운 옵션, 드롭다운 옵션 그룹이 포함됩니다.
<label for="value in options">
<input type="checkbox" :value="value" v-model="selected">
</label>
data: {
options: [1, 2, 3, 4, 5],
selected: [],
}주의, type='checkbox'가 확정된 경우에만 상기 상황을 발효시킬 수 있습니다. type 값은 동적 값이 될 수 없습니다. v-model이 같은 변수에 여러 번 귀속되었을 때 type 값을 검사해야 합니다. 만약에 이때 type이 동적입니다. 예를 들어 type='type'으로 동적 귀속을 하면 템플릿 컴파일이 잘못될 수 있습니다.
v-model은 사실 v-bind와 v-on의 문법 설탕입니다.
이것은 vue 공식 문서에서 특별히 지적한 것이다. 이 구절을 읽기 전에 나는 이것에 대해 매우 모호하다.
<input v-model="something"> 사실은 <input v-bind:value="something" v-on:input="something = $event.target.value">의 문법 설탕이다이때 이런 인식의 모호함은 사라졌다.
우리의 이 글은 v-on을 언급하지 않았는데, 그것은 사실 하나의 이벤트 귀속기이다.<
input v-bind:value="something" v-on:input="something = $event.target.value">를 자세히 읽어 보니 두 부분으로 구성되어 있습니다. v-bind:value과v-on:input,value 속성과 input 이벤트가 있어야 합니다. 그렇지 않으면 v-model과 같지 않을 것입니다. 그리고 input 이벤트에서 바로something은 현재 입력 값과 같습니다.정말 이 원리 때문에 v-model은 순식간에 더 이상 이해하기 어렵지 않게 되었다.
작은 매듭
한 마디로 하면 v-bind와 v-model을 구분하려면 세 마디만 기억해야 한다.
1. v-bind는 데이터 귀속으로 양방향 귀속 효과가 없지만 반드시 표 요소에 사용되지 않고 어떤 유효 요소에도 사용할 수 있다.
2. v-model은 양방향 귀속으로 기본적으로 표 요소에만 사용된다.
3. v-bind와 v-model이 한 원소에 동시에 사용될 때 각자의 역할은 변하지 않지만 v-model의 우선순위가 더욱 높고 이 원소가 단일한 것인지 한 그룹에 나타난 것인지 구분해야 한다.
vue에서 v-model과 v-bind 귀속 데이터의 공통점과 차이점을 상세히 설명하는 이 글은 여기에 소개합니다. vue에서 v-model과 v-bind 귀속 데이터에 대한 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 보십시오. 앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
