Vue.js 表单控件绑定
Posted shi_zi_183
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js 表单控件绑定相关的知识，希望对你有一定的参考价值。
Vue.js 表单控件绑定
在Web应用中，我们经常会使用表单向服务端提交一些数据，而通常也会在表单项中绑定一些如input、change等事件对用户输入地数据进行校验、更新等操作。在Vue.js中、我们可以使用v-model指令同步用户输入的数据到Vue实例data属性中，同时会对radio、checkbox、select等原生表单组件提供一些语法糖使表单操作更加容易。
基本用法
text
设置文本框v-model为name
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example">
<span>Welcome name join DDFE</span>
<br>
<input type="text" v-model="name" placeholder="join DDFE">
</div>
</body>
<script>
new Vue(
el: "#example",
data:
name: ""
)
</script>
</html>
当用户操作文本框时，vm.name会自动更新为用户输入的值，同时，span内的内部也会随之改变。
checkbox
复选框checkbox在表单中会经常使用，下面我们来看看单个checkbox如何使用v-model。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">checked</label>
</div>
</body>
<script>
new Vue(
el: "#example",
data:
checked: true
)
</script>
</html>
当用户勾选了checkbox时，vm.checked=true，否则vm.checked=false，label中的值也会随之改变。
大多数时候我们使用的都是多个复选框，即一个复选框组。此时，被选中的值将会放入一个数组中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example">
<input type="checkbox" id="flash" value="flash" v-model="bizLines">
<label for="flash">快车</label>
<input type="checkbox" id="premium" value="premium" v-model="bizLines">
<label for="premium">专车</label>
<input type="checkbox" id="bus" value="bus" v-model="bizLines">
<label for="bus">巴士</label>
<br>
<span>Checked lines: bizLines | json</span>
</div>
</body>
<script>
new Vue(
el: "#example",
data:
bizLines: []
)
</script>
</html>
radio
当单选钮被选中时，v-model中的变量值会被赋值为对应的value值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example">
<input type="radio" id="flash" value="flash" v-model="bizLine">
<label for="flash">快车</label>
<br>
<input type="radio" id="bus" value="bus" v-model="bizLine">
<label for="bus">巴士</label>
<br>
<span>Picked: bizLine</span>
</div>
</body>
<script>
new Vue(
el: "#example",
data:
bizLine: ""
)
</script>
</html>
注：可以看到这里没有将两个单选设置为同一name，但是它们仍然互斥了，这是v-model的作用。
select
因为select控件分为单选和多选，所以v-model在select控件的单选和多选上会有不同的表现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example">
<select v-model="bizLine">
<option selected value="flash">快车</option>
<option value="premium">专车</option>
<option value="bus">巴士</option>
</select>
<span>Selected: bizLine</span>
</div>
</body>
<script>
new Vue(
el: "#example",
data:
bizLine: ""
)
</script>
</html>
当被选中的option有value属性时，vm.selected为对应option的value值；否则为对应options的text值。
对于多选select控件，被选中的值会放入一个数组中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example">
<select v-model="bizLines" multiple>
<option selected value="flash">快车</option>
<option value="premium">专车</option>
<option value="bus">巴士</option>
</select>
<span>Selected: bizLines | json</span>
</div>
</body>
<script>
new Vue(
el: "#example",
data:
bizLines: []
)
</script>
</html>
我们也可以通过v-for指令来动态生成option。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example">
<select v-model="bizLine">
<option v-for="option in options" :value="option.value">
option.text
</option>
</select>
<span>Selected: bizLine</span>
</div>
</body>
<script>
new Vue(
el: "#example",
data:
bizLine: 'flash',
options: [
text: '快车',value: 'flash',
text: '专车',value: 'premium',
text: '巴士',value: 'bus',
]
)
</script>
</html>
值绑定
在通常情况下，对于radio、checkbox、select组件，通过v-model绑定的值都是字符串，checkbox除外，checkbox可能是布尔值。
有时我们会有动态绑定Vue.js实例属性的需求，这时可以使用v-bind来实现这个需求。通过v-bind来代替直接使用value属性，我们还可以绑定非字符串的值，如数值、对象、数组等。
1、checkbox
<input type="checkbox" v-model="toggle" :true-value="a" :flase-value="b">
- 勾选checkbox时，vm.toggle === vm.a
- 未勾选checkbox时，vm.toggle === vm.b
注：:true-value和:false-value只适合同一个checkbox组只有一个checkbox的情况。如果有多个checkbox，请使用:value进行绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example">
<input type="checkbox" id="flash" :value="flash" v-model="bizLines">
<label for="flash">flash.name</label>
<input type="checkbox" id="premium" :value="premium" v-model="bizLines">
<label for="premium">premium.name</label>
<input type="checkbox" id="bus" :value="bus" v-model="bizLines">
<label for="bus">bus.name</label>
<br>
<span>Checked bizLines: bizLines | json</span>
</div>
</body>
<script>
new Vue(
el: "#example",
data:
flash: name: '快车',
premium: name: '专车',
bus以上是关于Vue.js 表单控件绑定的主要内容，如果未能解决你的问题，请参考以下文章
Vue.js-----轻量高效的MVVM框架（七表单控件绑定）