今天主要学习一下表单输入绑定。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>
运行后,可以看到选中后,选中的值显示在下面。
更多优质文章,可以微信扫码关注: