温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue中v-model双向绑定input输入框问题怎么解决

发布时间:2023-04-26 15:16:01 来源:亿速云 阅读:287 作者:iii 栏目:开发技术

这篇文章主要讲解了“vue中v-model双向绑定input输入框问题怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“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)

    感谢各位的阅读,以上就是“vue中v-model双向绑定input输入框问题怎么解决”的内容了,经过本文的学习后,相信大家对vue中v-model双向绑定input输入框问题怎么解决这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI