Vue表单控件数据绑定方法详解

2020-06-16 06:52:16易采站长站整理

<!-- 当选中时,`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>

但若要绑定value到Vue实例的一个动态属性上,就可以用v-bind实现,并且这个属性的值可以不是字符串

复选框


<div id="example">
<input type="checkbox" v-model="toggle" :true-value="a" :false-value="b">
<span>{{ toggle }}</span>
</div>
<script>
var example = new Vue({
el: '#example',
data:{
toggle:'',
a:true,
b:false
}
})
</script>

单选按钮


<div id="example">
<input type="radio" v-model="pick" :value="a">
<span>{{ pick }}</span>
</div>
<script>
var example = new Vue({
el: '#example',
data:{
pick:'',
a:true
}
})
</script>

选择列表


<div id="example">
<select v-model="selected">
<option :value="{ number: 123 }">123</option>
<option :value="{ number: 234 }">234</option>
<option :value="{ number: 345 }">345</option>
</select>
<span>Selected: {{ selected.number }}</span>
</div>
<script>
var example = new Vue({
el: '#example',
data:{
selected:''
}
})
</script>

修饰符
.lazy

在默认情况下, v-model在input事件中同步输入框的值与数据,但可以添加一个修饰符 lazy ,从而转变为在change事件中同步

下列例子中,光标移出输入框时,才同步数据


<div id="example">
<input v-model.lazy="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>
<script>
var example = new Vue({
el: '#example',
data:{
message:''
}
})
</script>

.number

如果想自动将用户的输入值转为Number类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符number给v-model来处理输入值

这通常很有用,因为在 type=”number” 时 HTML 中输入的值也总是会返回字符串类型


<div id="example">
<div>
<input v-model="age1" type="number">
<span>{{type1}}</span>
<p>普通输入: {{ age1 }}</p>
</div>
<div>
<input v-model.number="age2" type="number">
<span>{{type2}}</span>
<p>number修饰符输入: {{ age2 }}</p>