首页 > 其他 > 详细

v-model双向绑定

时间:2020-06-01 19:48:18      阅读:21      评论:0      收藏:0      [点我收藏+]

v-model主要是用于input,select,textarea,component的数据的双向绑定

v-model修饰符:.lazy- 取代input监听change事件 .number- 输入字符串转为数字 .trim- 输入首尾空格过滤

v-model语法糖

<input type="text" v-model="msg">

//等同于

<input  v-bind:value="msg" v-on:input="msg=$even.target.value">

v-model的原理Object.definePropertype()

技术分享图片

 <div>
        输入:<input type="text" id="put"> 同步展示:
        <span id="show"></span>
    </div>
    <script>
        var obj = {};
        Object.defineProperty(obj, ‘put‘, {
            get: function() {
                return obj
            },
            set: function(newVal) {
                document.getElementById("put").value = newVal
                document.getElementById("show").innerHTML = newVal
            }
        })
        document.getElementById("put").addEventListener("keyup", function(event) {
            obj.put = event.target.value
        })
    </script>

技术分享图片

 

  

 

v-model双向绑定

原文:https://www.cnblogs.com/fortuneteller-li/p/13026756.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!