脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue表单输入绑定,双向绑定

Vue中的表单输入绑定,双向绑定方式

 更新时间：2025年03月25日 16:37:44   作者：天马3798  
这篇文章主要介绍了Vue中的表单输入绑定,双向绑定方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

一、v-model 指令

  • 用于Vue 表单双向绑定
  • 用户Vue 组件属性双向绑定

v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。

它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

  • 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
  • <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
  • <select> 会绑定 value property 并侦听 change 事件。

二、v-model 使用案例

  • 文本
姓名：
<input type="text" v-model="student.name">
  • 多行文本
简介：
<textarea v-model="student.summary"></textarea>
  • 单选
所属省份：
<template v-for="item in areas">
    <div>
    <label > <input type="radio" name="area" :value="item" v-model="student.province">{{item}}</label>
    </div>
</template>
<script>
export default {
    data() {
        return {
            student: {
                name: '张三',
                score: 100.5,
                password: ' 1234 '
            },
            age: 10.8,
            areas: ['济南', '聊城', '北京']
        }
    }
}
</script>
  • 多选
多选省份：
<template v-for="item in areas">
    <div>
        <label> <input type="checkbox" name="checkvalue" :value="item" v-model="student.checkvalue">{{ item }}</label>
    </div>
</template>
export default {
    data() {
        return {
            student: {
                checkvalue:[]//多选框需要对应数组
            }
        }
    }
}
  • 下拉选择
下拉选择：
<select v-model="student.sel">
    <option :value="item" v-for="item in areas">{{ item }}</option>
</select>

三、v-model 修饰符

.lazy​

  • 默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。
  • 你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：
<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

.number​

  • 如果你想让用户输入自动转换为数字。
  • 你可以在 v-model 后添加 .number 修饰符来管理输入：
<input type="number" v-model.number="student.score">
  • 如果该值无法被 parseFloat() 处理，那么将返回原始值。
  • 特别是当输入为空时 (例如用户清空输入字段之后)，会返回一个空字符串。

注意：要制定type=number html属性

.trim​

  • 如果你想要默认自动去除用户输入内容中两端的空格。
  • 你可以在 v-model 后添加 .trim 修饰符：
<input v-model.number="student.password">

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论