この記事では、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 textarea 複数行テキストの双方向データ バインディングの例:
<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: 選択ボックスは双方向のデータバインディングを実装します。選択ボックスは単一の選択を実装します。ラジオ ボタン ボックスのオプションが無効な属性を設定している場合、オプションのテキストは、オプションがバインドされているときにバインドされます。ラジオボタンボックスのオプションに値がある場合、このオプションが選択されている場合、このオプションの値は次のようにバインドされます。選択ボックスの複数の選択 まず、ラジオ ボタンのオプションに無効な属性が設定されている場合、このオプションは選択できません。オプションを選択すると、このオプションのテキストがバインドされます。ラジオ ボタン ボックス内のオプションに値がある場合、このオプションはこのオプションの値にバインドされ、Ctrl キーを押します。選択するオプションをクリックします。 簡単な例は次のとおりです:
<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>ログイン後にコピー
3. v-model モディファイア
3.1 .lazy
以下のデフォルトの状況では、v-model は入力ボックスの値を同期します。各入力イベントがトリガーされた後のデータ。
(入力方法がテキストを結合する場合を除く)。遅延修飾子を追加して、使用に切り替えることができます
onchange イベントは同期されます。入力ボックスにデータが入力されても、データはすぐには変更されません。サンプル コードは次のとおりです。
3.2 .number 
ユーザーの入力値を数値型に自動的に変換したい場合は、ユーザーが数値型データを入力するときに、type を数値型として定義し、v-model に数値修飾子を追加します。入力された値は自動的に数値型に変換されます。ユーザーが特殊文字 e を入力した場合、数値属性は認識されないことに注意してください。
<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.3 .trim
ユーザーが入力した最初と最後の空白文字を自動的にフィルターしたい場合は、v-model にトリム修飾子を追加し、カーソルが入力ボックスの先頭にさらにいくつかのスペースを追加します。簡単なコード例は次のとおりです:
<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>ログイン後にコピー
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 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
