v-model双向绑定

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>

 

  

 

posted @ 2020-06-01 18:47  Fortuneteller  阅读(171)  评论(0编辑  收藏  举报