提示
本文主要讲解 Vue 中的表单输入绑定。@ermo
# 表单输入绑定
# 文本和多行文本
v-model 会根据表单控件的自动选取来更新元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
<div id="app">
请输入：<input type="text" v-model="message">
<p>input message is: {{ message }}</p>
<textarea v-model="webiste" style="white-space: pre-line;"></textarea>
<p>textarea message is: {{ webiste }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '',
webiste: ''
}
});
</script>
</body>
</html>
# 复选框
单个复选框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
checked: false
}
});
</script>
</body>
</html>
多个复选框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<input type="checkbox" id="checkbox" value="java" v-model="checkedNames">
<label for="java" >java</label>
<input type="checkbox" id="js" value="js" v-model="checkedNames">
<label for="js">js</label>
<input type="checkbox" id="php" value="php" v-model="checkedNames">
<label for="php">php</label>
<p>checkedNames: {{ checkedNames }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
checkedNames: []
}
});
</script>
</body>
</html>
# 单选按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<input type="radio" id="one" value="one" v-model="picked">
<label for="one">one</label>
<input type="radio" id="two" value="two" v-model="picked">
<label for="two">two</label>
<br>
<p>picked: {{picked}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
picked: ''
}
});
</script>
</body>
</html>
# 选择框
使用 v-model 绑定单个选择框时候，推荐提供一个禁用的空值选项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
<div id="app">
<select v-model="language">
<option disable value="">请选择</option>
<option>php</option>
<option>js</option>
<option>java</option>
</select>
<p>Selected: {{ language }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
language: ''
}
});
</script>
</body>
</html>
选择框多选的情况下，按住 shift 选中多个元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
<div id="app">
<select v-model="multiValue" multiple style="width: 50px;">
<option>js</option>
<option>php</option>
<option>java</option>
</select>
<p>Multiple Selected: {{multiValue}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
multiValue: []
}
});
</script>
</body>
</html>
使用 v-for 渲染多个选择框元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{option.text}}
</option>
</select>
<p>selected: {{selected}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
selected: '',
options: [
{ text: 'A', value: 'a' },
{ text: 'B', value: 'b' },
{ text: 'C', value: 'c' },
]
}
});
</script>
</body>
</html>
# 值绑定
对于单选框、复选框和选择框的时候，对应的值一般是静态字符串：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
<div id="app">
单选框
<input type="radio" value="a" v-model="picked">
<p>picked: {{picked}}</p>
复选框
<input type="checkbox" v-model="checked">
<p>checked: {{checked}}</p>
选择框
<select v-model="selected">
<option value="abc">ABC</option>
</select>
<p>selected: {{selected}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
picked: '',
checked: '',
selected: ''
}
});
</script>
</body>
</html>
# 修饰符
默认情况下，v-model 是在 input 事件同步表单数据，可以通过添加 .lazy 修饰符，转变为 change 事件同步数据。
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
.number 可以将用户输入的值自动转为 Number 类型：
<input v-model.number="age" type="number">
.trim 可以过滤用户输入的字符收尾空格：
<input v-model.trim="msg">