这篇文章主要讲解了“vue中v-model双向绑定input输入框问题怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue中v-model双向绑定input输入框问题怎么解决”吧!
<!-- 输入框 --> <input type="number" class="form-control form-control-sm ipt-num" v-model.number.lazy="number" />
v-model双向绑定数据number,用户在输入框中内容之后,判断用户输入的内容,然后判断内容是否为正整数,不是的话要进行转换。
先把输入的值转换为整数
如果输入的值是字符串或者是 <1 的数字,则将输入框内容赋值为1
如果输入的值是带小数的数字,则将小数点之后的值去掉,只保留整数,并将其赋值给输入框
这样的话,当用户输入小数或者负数的时候,输入框显示的还是输入的内容,没有转换为我们想要的值。
但是vue中的number已经自动赋值为我们想要的数字了。
让输入框自动转换为我们想要的数值,解决方案:
在input组件中增加事件@blur="onBlur",当输入框失去焦点时,把number赋值为输入框中的值。
<!-- 输入框 --> <input type="number" class="form-control form-control-sm ipt-num" v-model.number.lazy="number" @blur="onBlur"/>
methods: { onBlur(e) { e.target.value = this.number } }
v-model实现双向绑定的语法糖,常用于表单与组件之间的数据双向绑定.
1. 原理
分两步骤
v-bind
绑定一个value属性
v-on
指令给当前元素绑定input事件
可看出v-model绑定在表单上时,v-model其实就是v-bind绑定value和v-on监听input事件的结合体
v-model = v-bind:value + v-on:input
2. 实现
用v-bind:value + v-on:input来模拟实现v-model
<input type="text" :value="username" @input="username = $event.target.value" />
例子解释:
通过 v-bind:value 绑定 username 变量,每次输入内容的时候触发input事件
通过事件对象参数 event.target.value 获得输入的内容,并且把这个内容赋值给username
此时更改username时input输入框会变化,更改input输入框时username变量会变,从而实现了v-model的双向绑定功能
1. 原理
v-model绑定在组件上的时候做了以下步骤
在父组件内给子组件标签添加 v-model ,其实就是给子组件绑定了 value 属性
子组件内使用 prop 创建 创建 value 属性可以拿到父组件传递下来的值,名字必须是 value。
子组件内部更改 value 的时候,必须通过 $emit 派发一个 input 事件,并携最新的值
v-model 会自动监听 input 事件,把接收到的最新的值同步赋值到 v-model 绑定的变量上
2. 实现
父组件操作
<子组件标签 v-model="父组件定义的变量值 />
子组件操作
<template> <p>子组件库存:{{ value }}</p> <button @click="addFun">增加1</button> </template> <script> export default { props:{ value:{ type: Number, default:0 } }, methods:{ addFun() { this.$emit('input', this.value + 1) } } } </script> // 这样后每次点击按钮的时候,库存就会加1,并且把变更后的值传递给父组件 // 父组件 v-model 绑定的变量就会改变
3. 实例
父组件
//v-model绑定值 <el-form-item label="员工头像"> <!-- 放置上传图片 --> <UploadImg v-model="userInfo.staffPhoto" /> </el-form-item> //uploadimg: 自定义的组件, v-model:双向绑定
子组件(图片上传组件)
//1.定义props value来接收父组件传入的图片地址 props: { // 父组件传递过来的v-model对应的值 value: { type: String, default: '' } }, //2.直接用value来显示图片 <img :src="value" /> //3.在子组件图片上传成功之后,this.$emit(‘input', 新地址), 抛给父组件,达到更新父组件中v-model绑定数据项 const imageUrl = `https://${data.Location}` this.$emit('input', imageUrl)
感谢各位的阅读,以上就是“vue中v-model双向绑定input输入框问题怎么解决”的内容了,经过本文的学习后,相信大家对vue中v-model双向绑定input输入框问题怎么解决这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。