表单绑定是实现动态数据双向绑定的重要部分,它让开发者可以轻松地管理和响应用户输入。本文将详细介绍如何在Vue 3中利用v-model
指令以及一些特定修饰符来处理不同类型的表单输入。
v-model双向数据绑定
Vue的 v-model
指令提供了双向绑定的功能,key在表单和组件中使用。对于原生表单元素,v-model
绑定的是 value
属性和 input
事件。
当使用属性绑定:value='变量'
时,当input框发生变化,页面不会改变,使用v-model
双向数据绑定时,页面会及时更新渲染
(1)单项数据绑定 :value=‘变量’
input框内的内容变化,页面不会及时更新
(2)双向数据绑定 v-model
input框内的内容变化,页面会更新
响应式表单数据
<script setup>import {ref,reactive,computed,nextTick} from 'vue'const uname=ref(" ")const gender=ref('a1')const selectSingle=ref('')const selectMore=ref([])const checkMore=ref(['手机'])const txt=ref(' ')//一个响应式对象form来存储表单的各种输入值:const hobbys = reactive([{id: 1,value: '玩游戏'},{id: 2,value: '看小视频'},{id: 3,value: '唱歌'}])const ins = reactive([{id: 1,value: '电脑'},{id: 2,value: '手机'},{id: 3,value: '手表'},{id: 4,value: '电视'}])
</script>
文本 (Text)
<span>用户名:{{uname}}<el-input v-model="uname"/></span><br/>
单选框 (Radio)
<span>性别: {{gender}}
<el-radio type="radio" v-model="gender" label="a1"><label for="a1">男</label></el-radio>
<el-radio type="radio" v-model="gender" label="a2"><label for="a2">女</label></el-radio>
</span><br/>
选择框 (Select)
单选爱好: <el-select v-model="selectSingle" placeholder="请选择">
<el-option v-for="item in hobbys" :label="item.value" :key="item.id" :value="item.id"></el-option>
</el-select> {{selectSingle}} <br/><br/>
多选爱好: <el-select v-model="selectMore" placeholder="请选择" multiple="multiple">
<el-option v-for="item in hobbys" :label="item.value" :key="item.id" :value="item.id"></el-option>
</el-select> {{selectMore}} <br/><br/>
复选框 (Checkbox)
多选设备:<el-checkbox v-model="checkMore" v-for="item in ins" :label="item.value" :key="item.id" :value="item.id" >
</el-checkbox> {{checkMore}}<br/><br/>
修饰符
lazy
在默认情况下,v-model
在每次 input
事件触发后将输入框的值与数据进行同步 (除了上述输入法组织文字时)。你可以添加 lazy
修饰符,从而转为在 change
事件_之后_进行同步:
<!-- 只有在失去焦点或按下回车键后才更新绑定的值。 -->
{{txt}}<el-input v-model.lazy="txt"></el-input><br/><br/>
number
如果想自动将用户的输入值转为数值类型,可以给 v-model
添加 number
修饰符:
<!--将用户的输入转换为数值类型。-->{{txt}}<el-input v-model.number ="txt"></el-input><br/><br/>
trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model
添加 trim
修饰符:
<!--自动过滤用户输入的首尾空白字符-->
{{txt}}<el-input v-model.trim="txt"></el-input><br/><br/>
总结:
通过Vue 3中的v-model
指令和响应式数据,我们能够简洁而高效地管理各种表单输入。利用修饰符,我们可以进一步控制输入的行为,使得表单的处理变得更加灵活和友好。希望本文能帮助您更好地理解和应用Vue 3中的表单输入绑定功能!