今天主要学习一下表单输入绑定。v-model指令在表单<input> <textarea> <select> 等元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新数据。
v-model会忽略所有表单元素的value、checked、selected、特性的初始值，而总是将Vue实例的数据作为数据来源。你应该通过Javascript在组件的data选项中声明初始值。
对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。
文本
<template>
<div>
<input v-model="message" placeholder="input message" />
<br/>
<span>Message is :{{message}}</span>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
message:''
}
}
}
</script>运行后，可以看到输入的内容可以动态的显示出来。
多行文本
<template>
<div>
<textarea v-model="message" placeholder="input message" > </textarea>
<br/>
<span>Message is :{{message}}</span>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
message:''
}
}
}
</script>运行后可以看到一个文本输入框，输入多行文本都能实时的显示更新出来。
单个复选框
单个复选框，绑定的值时bool值,这个和input的value无关，具体代码如下：
<template>
<div>
<input type="checkbox" id="checkbox1" v-model="checked" />
<br/>
<span>checked: {{checked}}</span>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
checked:''//注意；如果此处checked为非数组类型，选中后结果为bool值
}
}
}
</script>大家可以尝试下，<input type="checkbox" id="checkbox1" value="张三" v-model="checked" />选中后仍然是bool值。当然了如果大家想使用自定义的值时，可以使用这两个字段true-value，false-value，具体代码如下：
<template>
<div>
<input type="checkbox" id="checkbox" v-model="checked" true-value="AAA"
false-value="BBB">
<label for="checkbox">{{ checked }}</label>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
checked:''
}
}
}
</script>代码运行起来后，可以看到选中后显示AAA，取消选中时显示BBB。
多个复选框
true-value和false-value只适合同一个checkbox组只有一个checkbox的情况，如果有多个checkbox,请使用value进行值绑定。
<template>
<div>
<input type="checkbox" id="checkbox1" value="张三" v-model="checked" />
<br/>
<input type="checkbox" id="checkbox2" value="李四" v-model="checked" />
<br/>
<input type="checkbox" id="checkbox3" value="王五" v-model="checked" />
<br/>
<span>checked: {{checked}}</span>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
checked:[]
}
}
}
</script>通过选中不同的选项，大家可以发现自己选中的内容可以实时更新。
选择框
1，单选时，代码如下：
<template>
<div>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
selected:''//当然我们也可以在这个地方设置默认选中项
}
}
}
</script>运行代码后大家可以看到点击请选择，就可以选择自己要选中的选项。
2，多选时，代码如下：
<template>
<div>
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br/>
<span>selected is:{{selected}}</span>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
selected:[]
}
}
}
</script>v-for和复选框结合起来使用，代码如下：
<template>
<div>
<select v-model="selected" multiple style="width: 50px;">
<option v-for="option in options" :value="option.value">
{{option.text}}
</option>
</select>
<br/>
<span>selected is:{{selected}}</span>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
selected:[],
options:[
{text:"A",value:'A'},
{text:"B",value:'B'},
{text:"C",value:'C'}
]
}
}
}
</script>运行后可以看到和上面同样的效果
值绑定
对于单选按钮，复选框以及选择框的选项，v-model绑定的值通常是静态字符串（对于复选框也可以是布尔值）。但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。
单选按钮
<template>
<div>
<input type="radio" name="name" v-model="pick" value="a" /><label>a</label>
<br/>
<input type="radio" name="name" v-model="pick" value="b" /><label>b</label>
<br/>
<input type="radio" name="name" v-model="pick" value="c" /><label>c</label>
<br/>
<span>picked: {{pick}}</span>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data (){
return {
pick:''
}
}
}
</script>运行后，可以看到选中后，选中的值显示在下面。
更多优质文章，可以微信扫码关注：
