기사 디렉토리
머리말
v-model 디렉티브는 Vue.js에서 양방향 데이터 바인딩을 위한 중요한 메커니즘입니다. 양식 컨트롤의 값을 Vue.js 인스턴스의 데이터에 양방향으로 바인딩할 수 있습니다. 즉, 양식 컨트롤의 값이 변경되면 Vue.js 인스턴스의 데이터도 업데이트되고 그 반대도 마찬가지입니다.
v-model 디렉티브를 사용할 때 Vue.js 인스턴스의 데이터에 바인딩해야 합니다. 예를 들면 다음과 같습니다.
<input v-model="message">
인풋 인풋 박스가 보이면 v-model을 따라
버튼 버튼을 보고 @click을 따라야 합니다
위의 코드에서 v-model 명령은 Vue.js 인스턴스의 메시지 데이터에 바인딩됩니다
. 입력 상자의 값이 변경되면 v-model 명령은 자동으로 새 값을 메시지 데이터로 업데이트하여 양방향 데이터 바인딩을 실현합니다.
v-model 지시문은 , 등과 같은 양식 컨트롤에만 사용할 수 있습니다 <input>. 다른 사용자 지정 구성 요소의 경우 소품 및 사용자 지정 이벤트를 사용하여 유사한 양방향 데이터 바인딩 메커니즘을 구현해야 합니다.<textarea><select>
v-model.lazy 동기화 지연
Vue 인스턴스와 양식 요소의 값을 데이터 바인딩하는 데 사용됩니다.
.lazy수정자는 입력 이벤트를 변경 이벤트로 변환하고 요소가 포커스를 잃거나 사용자가 Enter 키를 누를 때만 데이터가 업데이트되어 지연된 동기화 효과를 얻습니다.
이렇게 하면 불필요한 업데이트를 피하고 성능을 최적화할 수 있습니다.
[코드 예시 1]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
延迟同步 <input type="text" v-model.lazy="data1">{
{
data1}}
</div>
</body>
<script src="../js/vue3.js"></script>
<script>
let vm = Vue.createApp({
data() {
return {
data1: ''
}
},
})
vm.mount('#app')
</script>
</html>
【코드 예 2】
<template>
<div>
<input v-model.lazy="username" type="text" placeholder="Enter username" />
<p>Username: {
{ username }}</p>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
};
},
};
</script>
사용자가 입력 상자에 데이터를 입력하면 v-model.lazy 지시문은 입력 값을 구성 요소의 데이터 속성에 즉시 동기화하지 않도록 Vue에 지시합니다. 대신 데이터를 동기화하기 전에 사용자가 입력 필드를 떠날 때까지 기다립니다.
특히, 사용자가 입력 상자에 데이터를 입력하면 Vue는 이러한 입력을 캐시하고 흐림 이벤트(즉, 사용자가 입력 상자를 나감)가 발생할 때만 캐시의 데이터가 구성 요소의 데이터 속성에 동기화됩니다.
위의 예에서 사용자가 입력란에 사용자 이름을 입력하면 입력한 값이 컴포넌트 인스턴스의 속성 v-model.lazy="username"에 바인딩되도록 지정됩니다 . username사용자가 입력 상자를 떠나면 구성 요소의 데이터 속성 값이 업데이트되고 username템플릿의 보간 구문을 사용하여 {
{ username }}표시 됩니다.
v-model.trim 공백 제거
v-model.trim은 Vue.js에서 제공하는 수정자로서 양식 입력 상자에 입력된 내용에서 선행 및 후행 공백을 제거하는 데 사용됩니다.
v-model을 사용하여 양식 입력 상자의 값을 바인딩할 때 v-model 뒤에 .trim을 추가할 수 있습니다. 예를 들면 다음과 같습니다.
<input type="text" v-model.trim="message">
이와 같이 내용을 입력할 때 입력 내용 전후에 공백이 있으면 공백을 자동으로 제거하여 message 변수에 바인딩합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
去掉空格 <input type="text" v-model.trim="data2"> <button @click="check">验证</button>
</div>
</body>
<script src="../js/vue3.js"></script>
<script>
let vm = Vue.createApp({
data() {
return {
data2: ''
}
},
methods: {
check(){
console.log( this.data2.length );
}
},
})
vm.mount('#app')
</script>
</html>
