当前位置：首页 > news >正文

Vue表单输入绑定v-model

news 2025/6/22 11:43:47

表单输入绑定

在前端处理表单时，我们常常需要将表单输入框的内容同步给Javascript中相应的变量。手动连接绑定和更改事件监听器可能会很麻，v-model 指令帮我们简化了这一步骤。

<template><h3>表单输入绑定</h3><hr>
<input type="text" v-model="message" ><p>Message is: {{ message }}</p></template><script>export default {data(){return{message:"",}}}</script>

运行结果：
在这里插入图片描述
复选框
单一的复选框，绑定布尔类型值。

<template><h3>表单输入绑定</h3><hr>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox" >{{ checked }}</label></template><script>export default {data(){return{checked:true}}}</script>

运行结果：
在这里插入图片描述
修饰符
v-model 也提供了修饰符：.lazy ,.number , .trim
.lazy
默认情况下，v-model 会在每次input事件后更新数据。可以添加lazy修饰符来改为在每次change事件后更新数据。

<template><h3>表单输入绑定</h3><hr>
<input type="text" v-model.lazy="message" ><p>Message is: {{ message }}</p></template><script>export default {data(){return{message:"",}}}</script>