表单输入绑定
表单输入绑定
单行文本输入框
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id = "app">
<input type="text" v-model="message" value="Hello Vue.js">
<p>message:{{message}}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
message: 'Java无难事'
}
}
}).mount('#app');
</script>
</body>
</html>
在input元素中使用value属性设置了一个初始值"Hello Vue.js",用v-model指令绑定了一个表达式message,对应的数据属性是message。
从图中可以看出文本输入框显示的是数据属性message的值,而不是value属性的值。这是因为v-model指令会忽略所有表单元素的value、checked、selected属性的初始值,而总是将当前活动实例的数据属性作为数据来源。所以我们应该在js脚本中或是在组件的data选项中声明初始值。
v-model提供了一个trim修饰符,可以自动过滤输入数据首尾的空白字符。
v-model还有.lazy修饰符。默认情况下v-model在每次input事件触发后将输入框的值与数据进行同步,如果使用了该修饰符则会转变为使用change事件进行同步。
如果想自动将用户输入的数据转换为数值类型,可以给v-model加number修饰符。
多行文本输入框
<textarea v-model="message"></textarea>
复选框
复选框单独使用时,v-model绑定的是布尔值,多个一起使用时绑定的是同一个数组,选中的复选框的值将被保存到数组中。
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id = "app">
<h3>单个复选框:</h3>
<input id="agreement" type="checkbox" v-model="isAgree">
<label for="agreement">{{ isAgree }}</label>
<h3>多个复选框:</h3>
<input id="basketball" type="checkbox" value="篮球" v-model="interests">
<label for="basketball">篮球</label>
<input id="football" type="checkbox" value="足球" v-model="interests">
<label for="football">足球</label>
<input id="volleyball" type="checkbox" value="排球" v-model="interests">
<label for="volleyball">排球</label>
<input id="swim" type="checkbox" value="游泳" v-model="interests">
<label for="swim">游泳</label>
<p>你的兴趣爱好是: {{ interests }}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
isAgree: false,
interests: []
}
}
}).mount('#app');
</script>
</body>
</html>
对于这种一组复选框一起使用的场景,可以考虑将变化的部分抽取出来放到组件实例的data中,定义为一个对象或数组,然后通过v-for指令循环渲染输出。
单选按钮
当单选按钮被选中时,v-model指令所绑定的数据属性的值会被设置为该单选按钮的value值 。
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id = "app">
<input id="male" type="radio" value="1" v-model="gender">
<label for="male">男</label>
<br>
<input id="female" type="radio" value="0" v-model="gender">
<label for="female">女</label>
<br>
<span>性别:{{ gender }}</span>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
gender: ''
}
}
}).mount('#app');
</script>
</body>
</html>
当选中男或女,gender的值会变为1或0;对于单选按钮,v-model监听的是change事件。
选择框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id = "app">
<h3>单选选择框</h3>
<select v-model="education">
<option disabled value="">请选择您的学历</option>
<option>高中</option>
<option>本科</option>
<option>硕士</option>
<option>博士</option>
</select>
<p>您的学历是:{{ education }}</p>
<h3>多选选择框</h3>
<select v-model="searches" multiple>
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
<p>您选择的搜索引擎是:{{ searches }}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
education: '',
searches: [],
options: [
{text: '百度', value: 'baidu.com'},
{text: '谷歌', value: 'google.com'},
{text: '必应', value: 'bing.com'}
]
}
}
}).mount('#app');
</script>
</body>
</html>
值绑定
复选框
在使用某个复选框时,在input元素上可以使用两个特殊的属性true-value和false-value来指定选中状态和未选中状态下v-model绑定的值是什么。
<div id="app">
<input id="agreement" type="checkbox" v-model="isAgree" true-value="yes" false-value="no">
<label for="agreement">{{ isAgree }}</label>
</div>
<script>
const vm = Vue.createApp({
data(){
return {
isAgree:false
}
}
}).mount('#app');
</script>
isAgree初始值为false,当选中复选框时,其值为true-value的值,之后再取消复选框,其值为false-value的值。
这两个属性还可以使用v-bind绑定到数据属性上:
<div id="app">
<input id="agreement" type="checkbox" v-model="isAgree" :true-value="trueVal" :false-value="falseVal">
<label for="agreement">{{ isAgree }}</label>
</div>
<script>
const vm = Vue.createApp({
data(){
return {
isAgree:false,
trueVal:'真',
falseVal:'假'
}
}
}).mount('#app');
</script>
单选按钮
单选按钮被选中时,v-model绑定的数据属性的默认值为该单选按钮的value值,可以将value属性绑定到另一个属性:
<div id="app">
<input id="male" type="radio" v-model="gender" :value="genderVal[0]">
<label for="male">男</label><br>
<input id="female" type="radio" v-model="gender" :value="genderVal[1]">
<label for="female">女</label><br>
<span>性别:{{ gender }}</span>
</div>
<script>
const vm = Vue.createApp({
data(){
return {
gender:'',
fenderVal:['帅哥','美女']
}
}
}).mount('#app');
</script>
选择框的选项
通过选择框选择内容后,其值是选项的值(option元素的value属性的值),选项的value属性也可以使用v-bind指令绑定到一个数据属性上。
<option v-for="option in options" :value="option.value"></option>
实例:用户注册
在单页应用程序程序中,用户注册在提交时使用AJAX发送数据到服务端,数据格式采用JSON格式,在表单提交前,通常使将要发送的数据先组织为一个js对象或数组,然后转换为JSON字符串进行发送。可以使用v-model指令将输入控件直接绑定到某个对象的属性上,然后用v-on绑定提交按钮的click事件,在事件处理函数中直接发送该对象即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<div id = "app">
<form>
<table border="0">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="username" v-model="user.username">
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="password" v-model="user.password">
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="gender" value="1" v-model="user.gender">男
<input type="radio" name="gender" value="0" v-model="user.gender">女
</td>
</tr>
<tr>
<td>邮件地址:</td>
<td>
<input type="text" name="email" v-model="user.email">
</td>
</tr>
<tr>
<td>密码问题:</td>
<td>
<input type="text" name="pwdQuestion" v-model="user.pwdQuestion">
</td>
</tr>
<tr>
<td>密码答案:</td>
<td>
<input type="text" name="pwdAnswer" v-model="user.pwdAnswer">
</td>
</tr>
<tr>
<td>
<input type="submit" value="注册" @click.prevent="register">
</td>
<td><input type="reset" value="重填"></td>
</tr>
</table>
</form>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
user: {
username: '',
password: '',
gender: '',
email: '',
pwdQuestion: '',
pwdAnswer: ''
}
}
},
methods: {
register: function(){
//直接发送this.user对象
//...
console.log(this.user);
}
}
}).mount('#app');
</script>
</body>
</html>
在提交按钮上绑定click事件时用了prevent修饰符,这是因为本实例是在click事件响应函数中完成的用户注册数据的发送,并不希望表单的默认行为发生。