記事ディレクトリ
序文
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 命令が自動的に新しい値をメッセージ データに更新し、双方向のデータ バインディングを実現します。
<input>v-model ディレクティブは、 、<textarea>などのフォーム コントロールにのみ使用できることに注意してください<select>。他のカスタム コンポーネントの場合は、props とカスタム イベントを使用して、同様の双方向データ バインディング メカニズムを実装する必要があります。
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">
これにより、内容を入力する際、入力内容の前後にスペースがあった場合、自動的にスペースが削除されてメッセージ変数にバインドされます。
<!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>
