이 글은 Vue(코드 포함)의 v-model 명령어 분석을 소개합니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다.
1. 명령어 설명
v-model은 기본적으로 사용자 입력 이벤트(onchange, onkeyup, onkeydown 등)를 모니터링하는 역할을 합니다. 공식 기본 구현 문서)를 사용하여 데이터를 업데이트하고 일부 극단적인 시나리오에 대한 특수 처리를 수행합니다.
2. 양식 입력 바인딩 방법 및 방법
2.1 입력 상자에 대한 양방향 데이터 바인딩 예:
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<label>请输入:</label><input type="text" v-model="inputs"/><br/>
<label>你在input框中输入了:</label><span>{{inputs}}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
inputs: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>로그인 후 복사
2.2 텍스트 영역 여러 줄 텍스트에 대한 양방향 데이터 바인딩 예:
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<label>请输入:</label><textarea v-model="text"></textarea><br/>
<label>你在textarea框中输入了:</label><span>{{text}}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
text: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>로그인 후 복사
2.3 체크박스는 데이터 바인딩을 구현합니다
단일 체크박스에 대한 데이터 바인딩의 예:
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<label>请输入:</label><input type="checkbox" id="checkbox" v-model="checked">选我<br/>
<label v-if="checked">选中了:</label>
<label v-if="!checked">没选中:</label>
<span>{{ checked }}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
checked: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>로그인 후 복사
여러 체크박스에 대한 데이터 바인딩의 예:
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<label>请输入:</label>
<input type="checkbox" id="vue1" value="vue1" v-model="checkedValues">vue1
<input type="checkbox" id="vue2" value="vue2" v-model="checkedValues">vue2
<input type="checkbox" id="vue3" value="vue3" v-model="checkedValues">vue3
<br/>
<label>选中了：</label><span>{{ checkedValues }}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
checkedValues: []
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>로그인 후 복사
2.4 라디오 버튼 구현 데이터 바인딩하고 선택한 라디오 버튼 값을 가져와 표시합니다.
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<input type="radio" id="radio1" value="1" v-model="checked">男<br/>
<input type="radio" id="radio2" value="2" v-model="checked">女<br/>
<label> 选中了：{{ checked }}</label>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
checked: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>로그인 후 복사
2.5 선택 상자 소개
방법 1: 선택 상자는 양방향 데이터 바인딩을 구현합니다. 먼저, 다음과 같은 경우의 상황을 소개합니다. 선택 상자는 단일 선택을 구현합니다. 라디오 버튼 상자의 옵션이 비활성화된 속성을 설정하면 옵션을 선택할 수 없습니다. 라디오 버튼 상자의 옵션에 값이 없으면 옵션 텍스트가 바인딩됩니다. 라디오 버튼 상자의 옵션에 값이 있는 경우 이 옵션을 선택하면 해당 옵션의 값이 바인딩됩니다.
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
selected: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>로그인 후 복사
방법 2에서는 다음과 같은 상황을 소개합니다. 선택 상자의 다중 선택 먼저 선택 항목에 다중 속성을 추가해야 합니다. 옵션에 비활성화된 속성이 설정된 경우 라디오 버튼 상자의 옵션에 값이 없으면 이 옵션을 선택할 수 없습니다. , 옵션이 선택되면 이 옵션의 텍스트가 바인딩됩니다. 라디오 버튼 상자의 옵션에 값이 있으면 이 옵션이 이 옵션의 값에 바인딩됩니다. 그런 다음 Ctrl 키를 누르고 간단한 예는 다음과 같습니다:
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<select v-model="selected" multiple>
<option disabled value="">请选择</option>
<option>A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
selected: []
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>로그인 후 복사
3. v-model modifier
3.1 .lazy
아래의 기본 상황에서는 v-model이 입력 상자의 값을 동기화합니다. 각 입력 이벤트가 트리거된 후 데이터를 사용합니다.
(입력 방법이 텍스트를 결합하는 경우는 제외) 게으른 수정자를 추가하여 다음을 사용하도록 전환할 수 있습니다.
onchange 이벤트는 입력 상자에 데이터가 입력되면 데이터가 즉시 변경되지 않습니다. 커서가 입력 상자를 벗어나면 데이터가 동기적으로 변경됩니다.
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<!-- 在“change”时而非“input”时更新 -->
<input type="text" id="names" v-model.lazy="msg" ><br/>
<label>输入值：</label>{{msg}}
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
msg: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>로그인 후 복사
3.2 .number
사용자가 입력한 값을 숫자형으로 자동 변환하고 싶다면, type을 숫자형으로 정의하고, 사용자가 숫자형 데이터를 입력하면 v-model.number에 숫자 수정자를 추가합니다. 입력된 값은 자동으로 숫자형으로 변환됩니다. 사용자가 특수 문자 e를 입력하면 숫자 속성을 인식할 수 없습니다.
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<!-- 在“change”时而非“input”时更新 -->
<input type="number" id="names" v-model.number="msg" ><br/>
<label>输入值：</label>{{msg}}
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
msg: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>로그인 후 복사
3.3 .trim
사용자가 입력한 첫 번째와 마지막 공백 문자를 자동으로 필터링하려면 v-model에 트림 수정자를 추가하고 입력 상자 시작 부분에 공백을 몇 개 더 추가하면 됩니다. 나뭇잎, 트림 속성은 자동으로 끝 공백을 필터링합니다. 간단한 코드 예는 다음과 같습니다:
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<label>无trim属性</label>
<input type="text" id="names" v-model="msg1" ><br/>
<label>输入值：</label>{{msg1}}<br/>
<label>有trim属性</label>
<input type="text" id="names2" v-model.trim="msg2" ><br/>
<label>输入值：</label>{{msg2}}
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
msg1: '',
msg2: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>로그인 후 복사
4.
4.1 自定义组件v-model
一个组件上的 v-model 默认会利用名为 value 的 prop
和名为 input 的事件，但是像输入框、单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。本文以自定义输入框和onchange事件为例，在输入框输入值，当光标离开以后输入值会输出绑定到置顶位置：
1. 在index中声明组件（在index声明的组件为全局组件，全局可用）：
Vue.component('base-text', {
model: {
prop: 'value',
event: 'change'
},
props: {
checked: Boolean
},
template: `<input type="text" id="inputs" v-on:change="$emit('change', $event.target.value)">`
});
=로그인 후 복사
2. 在要使用该组件的插件中声明：
<template>
<div>
<p class="p1">{{title}}</p>
<div class="spancss1">
<base-text v-model="msg"></base-text><br/>
<label>你输入了:</label>{{msg}}
</div>
</div>
</template>
<script>
export default {
name:"v-model",
data(){
return {
title: 'v-model学习',
msg: ''
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>로그인 후 복사
3. 结果示例如下：
相关推荐:
对4-v-bind指令的分析（附代码）
위 내용은 Vue의 v-model 지시문 분석(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
