v-modelを使用してフォームの値を収集し、双方向バインディングを実現します.値はデフォルトで収集されます.タイプがチェックボックスの場合、デフォルトのコレクションはブール値であり、選択されているかどうかを示します;
一、型式
1. テキスト テキスト ボックス、パスワード パスワード ボックス
値値を収集します。ユーザー入力は値値です。
账号：<input type="text" v-model="account">
密码：<input type="password" v-model="password">2.ラジオチェックボックス
収集された値は値の値であり、値の値はタグ属性に設定する必要があります
性别：
男<input type="radio" name="sex" value="male" v-model="sex">
女<input type="radio" name="sex" value="female" v-model="sex">3. チェックボックス
値が設定されていない場合:
収集されるのは、複数選択ボックスが選択されているかどうかのブール値、つまりtrue または false
値 value を設定する場合:
(1) 初期値は非配列型です。収集される型はブール型で、true または false です。
(2) 初期値は配列型です。収集されるのは、値の値で構成される配列です。
爱好：
吃饭<input type="checkbox" v-model="hobby" value="eat">
睡觉<input type="checkbox" v-model="hobby" value="sleep">
打游戏<input type="checkbox" v-model="hobby" value="game">new Vue({
el:"#root",
data:{
//使用一个demoData存起来，方便输入整个表单数据,注意前面的数据调用的时候，也要在前面加一个demoData
demoData:{
numb:'',
passw:'',
age:18,
sex:'',
hobby:[], //注意：这里要写成数组形式
school:'',
order:'',
agree:'' //这里只需要判断是否勾选，只需返回true或false
}
},
methods:{
demo(){
console.log(JSON.stringify(this.demoData))
}
}
})2. v-model の修飾子
1、トリム
収集されたデータは、文字列の前後のスペースを自動的に削除します。
2、怠け者
リアルタイムでデータを更新せずに、フォーカスが失われたときにデータを収集します。
3、番号
入力文字列を有効な数値に変換します。
完全なコード:
<div id="root">
<!-- 实现点击‘账号’也可以获取焦点
<label for="demo">账号：</label>
<input type="text" id="demo"> -->
<!-- prevent用于阻止默认行为 -->
<form @submit.prevent="demo">
<!-- v-model.trim:实现去除字符串前后的空格，但是无法去除字符串中间的空格 -->
账号：<input type="text" v-model.trim="demoData.numb"><br><br>
密码：<input type="password" v-model="demoData.passw"><br><br>
<!-- 这里的年龄设置了type类型为number，输入框就不能输入非数字，设置v-model.number修改该数值时就会转换为数字类型而不是字符串 -->
年龄：<input type="number" v-model.number="demoData.age"><br><br>
性别：
男<input type="radio" name="sex" value="male" v-model="demoData.sex">
女<input type="radio" name="sex" value="female" v-model="demoData.sex"><br><br>
爱好：
吃饭<input type="checkbox" v-model="demoData.hobby" value="eat">
睡觉<input type="checkbox" v-model="demoData.hobby" value="sleep">
打游戏<input type="checkbox" v-model="demoData.hobby" value="game"><br><br>
所属校区：
<select v-model="demoData.school">
<option value="">请选择所在校区</option>
<option value="shipai">石牌校区</option>
<option value="daxuecheng">大学城校区</option>
<option value="nanhai">南海校区</option>
<option value="shanwei">汕尾校区</option>
</select>
<br><br>
其他：
<!-- 多行信息 -->
<!-- lazy:在失去焦点的一瞬间再收集信息，而不是实时进行 -->
<textarea v-model.lazy="demoData.order"></textarea>
<br><br>
<input type="checkbox" v-model="demoData.agree">请您阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
<br><br>
<button>提交</button>
</form>
</div>new Vue({
el:"#root",
data:{
//使用一个demoData存起来，方便输入整个表单数据,注意前面的数据调用的时候，也要在前面加一个demoData
demoData:{
numb:'',
passw:'',
age:18,
sex:'',
hobby:[], //注意：这里要写成数组形式
school:'',
order:'',
agree:'' //这里只需要判断是否勾选，只需返回true或false
}
},
methods:{
demo(){
console.log(JSON.stringify(this.demoData))
}
}
})操作結果:
