表单输入绑定
基础用法
- 文本
- 多行文本
- 复选框
- 单选按钮
- 选择框
<div id="app">
<form action="#">
<!-- 文本 -->
<input type="text" placeholder="文本" v-model="text" />
<span>text : {{text}}</span><br />
<hr />
<!-- 多行文本 -->
<textarea
placeholder="多行文本"
cols="30"
rows="10"
v-model="textarea"
></textarea>
<span>textarea : {{textarea}}</span><br />
<hr />
<!-- 单个复选框:绑定到布尔值 -->
<input type="checkbox" value="复选框" v-model="checkbox" />
<span>单个复选框</span><br />
<span>checkbox : {{checkbox}}</span><br />
<hr />
<!-- 多个复选框:绑定到数组 -->
<div v-for="(item, index) in hobbys" :key="index">
<input
type="checkbox"
name="hobby"
v-model="checkboxs"
:value="item"
/>
<span>{{item}}</span>
</div>
<p>checkboxs : {{checkboxs}}</p>
<br />
<hr />
<!-- 单选按钮 -->
<input type="radio" value="单选按钮" v-model="radio" /><span>1</span>
<input type="radio" value="单选按钮2" v-model="radio" /><span>2</span>
<span>radio : {{radio}}</span><br />
<hr />
<!-- 选择框 -->
<select v-model="option">
<p>选择框</p>
<option
v-for="(item, index) in select"
:key="index"
:value="item.value"
>
{{item.message}}
</option>
</select>
<span>select : {{option}}</span>
</form>
</div>
<script>
let vm = new Vue({
el: '#app',
data: function () {
return {
text: '',
textarea: '',
checkbox: '',
checkboxs: [],
radio: '',
select: [
{ message: 'one', value: 'A' },
{ message: 'two', value: 'B' },
{ message: 'three', value: 'C' }
],
hobbys: ['python', 'java', 'vue'],
option: ''
}
}
})
</script>
值绑定
对于单选按钮,复选框及选择框的选项,
v-model
绑定的值通常是静态字符串 (对于复选框也可以是布尔值),但是有时我们可能想把值绑定到 Vue 实例的一个动态 property 上,这时可以用v-bind
实现,并且这个 property 的值可以不是字符串。
简单来说,就是通过v-bind将v-model绑定的值,绑定到vue中另一个动态的data值上。
修饰符
.lazy
在默认情况下,v-model
在每次 input
事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy
修饰符,从而转为在 change
事件_之后_进行同步:
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
.number
如果想自动将用户的输入值转为数值类型,可以给 v-model
添加 number
修饰符:
<input v-model.number="age" type="number">
这通常很有用,因为即使在 type="number"
时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat()
解析,则会返回原始的值。
.trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model
添加 trim
修饰符:
<input v-model.trim="msg">