Vue学习之路(四)---v-model(双向数据绑定)与表单
v-model具有双向数据绑定的功能,可以绑定数组和字符串,不过,在绑定之前,需要将我们需要绑定的数据进行初始化。1.当输入框的值改变时,{{value}}中的值会跟着改变//html"text" v-model="value" value="apple"/>{{value}}//datadata () {value: ''}2.input为checkbo
·
v-model具有双向数据绑定的功能,可以绑定数组和字符串,不过,在绑定之前,需要将我们需要绑定的数据进行初始化。
1.当输入框的值改变时,{{value}}中的值会跟着改变
//html
<input type="text" v-model="value" value="apple"/>
{{value}}
//data
data () {
value: ''
}
2.input为checkbox时,点击勾选框,v-model会自动将value值添加到valueArr中
//html
<input type="checkbox" v-model="valueArr" value="apple"/>
<input type="checkbox" v-model="valueArr" value="orange"/>
<input type="checkbox" v-model="valueArr" value="banana"/>{{valueArr}}
//data
data () {
valueArr: []
}
结果图
3.当input为单选按钮时
v-model会获取当前一个value或者valueArr的值,然后渲染到页面中
<input type="radio" v-model="value" value="apple"/>
<input type="radio" v-model="value" value="orange"/>
<input type="radio" v-model="value" value="banana"/>{{value}}
结果图
4.v-model中的修饰符
v-model.lazy: 是在输入完成或者失去焦点或者回车之后执行
v-model.trim: 去掉输入框的中的空格
v-model.number: 当输入的是‘11111’,会value自动转变为number类型
更多推荐
已为社区贡献6条内容
所有评论(0)