vue2.0双向绑定的使用及简单实现

• v-model双向绑定用法
  input的双向绑定

<div id='app'>
<input type='text' v-model='msg'>
{{msg}}
</div>

<script>
let vm=new Vue({
    el:'#app',
    data:{msg:'hello'},
})
</script>

chechbox（利用value值）

<div id="app2">
    <div v-for="a in aaa">
        <input type="checkbox" v-model="a.sel" @change="changeO">
        <span>{{a.name}}</span>
    </div>
    <br/>
    全选：<input type="checkbox" @change="allR" v-model="bbb">

</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {msg: 'hello'},
    })
    let vm2 = new Vue({
        el: '#app2',
        data: {
            aaa: [
                {
                'sel': false,
                'name': '游泳'
                },
                {
                 'sel': false,
                 'name': '爬山'
                },
                {
                 'sel': false,
                 'name': '睡觉'
                },
            ],
            bbb: false
        },
        methods: {
            allR(){

                this.aaa.forEach((item, index) = > item.sel = this.bbb)
            },
            changeO(){
                this.bbb = this.aaa.every(function (item) {
                    return item.sel;
                })
            }
        }
    })
</script>

• v-model双向绑定简单实现（defindProperty）

<input type="text" id="input"/>
<script>
    var obj={};
    var temp={}//用来保存obj设置的值的临时对象
    temp.name='默认的值'//
    Object.defineProperty(obj,'name',{
        set(val){//给obj赋值会触发get方法
            temp['name']=val;//当obj设置属性时，保存这个属性
            input.value=val//当设置值时把值赋给输入框
        },
        get(){//取obj的name属性会触发,get函数内不写返回值的话就返回undefined
            return temp['name'];//当obj取属性时，就从temp中取走属性
        }
    })

    input.value=obj.name;//调用get ， 拿到temp.name的值，初始化input的value

    input.addEventListener('input',function(){
        obj.name=this.value;//当值变化时候会调用obj的set方法
        console.log(obj.name)
    })
</script>