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
- }
- }
vue v-model双向绑定原理kalrry
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)
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
发表评论