表单输入绑定
在前端处理表单时,我们常常需要将表单输入框的内容同步给Javascript中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦,v-model指令帮我们简化了这一步骤
只要用户输入存在的地方基本离不开表单
input输入框
<template>
<h3>表单输入绑定</h3>
<form>
<input type="text" v-model="message">
<p>{{ message }}</p>
</form>
</template>
<script>
export default {
data(){
return{
message:""
}
}
}
</script>
框中输入什么,下面同步显示什么
百度搜索栏如下,输入什么同步读取,反馈数据
复选框
单一复选框,绑定布尔类型值
<template>
<h3>表单输入绑定</h3>
<form>
<input type="text" v-model="message">
<p>{{ message }}</p>
<input type="checkbox" id="checkbox" v-model="checked"/>
<label for="checkbox">{{ checked }}</label>
</form>
</template>
<script>
export default {
data(){
return{
message:"",
checked:false
}
}
}
</script>
修饰符
v-model也提供了修饰符:.lazy、.number、.trim
.lazy
默认情况下,v-model会在每次input事件后更新数据。你可以添加lazy修饰符来改为在每次change事件后更新数据
.number
只接收数字类型
.trim
接收去掉空格