风华正茂、时光流逝、真爱时光、努力创建辉煌。

【vue】---v-model实现的数据双向驱动的底层原理---基于Object.defineProperty实现双数据绑定

 

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
        <hr>
        <label>
            男 <input type="radio" value="男" v-model="radioVal">
        </label>
        <label>
            女<input type="radio" value="女" v-model="radioVal">
        </label>
        <p>您选择的性别是：{{radioVal}}</p>
        <hr>
        <label>
            抽烟 <input type="checkbox" value="抽烟" v-model="checkVal">
        </label>
        <label>
            喝酒 <input type="checkbox" value="喝酒" v-model="checkVal">
        </label>
        <label>
            烫头 <input type="checkbox" value="烫头" v-model="checkVal">
        </label>
        <label>
            大保健 <input type="checkbox" value="大保健" v-model="checkVal">
        </label>
        <ul>
            <li v-for="item in checkVal">{{item}}</li>
        </ul>
        <hr>

        <select v-model="seletVal">
            <option value="1998">1998</option>
            <option value="1999">1999</option>
            <option value="2000">2000</option>
            <option value="2001">2001</option>
            <option value="2002">2002</option>
        </select>
        <p>您的出身日期为:{{seletVal}}</p>
        <hr>
        <h2>基于Object.defineProperty实现双数据绑定</h2>

        <label>
            抽烟 <input type="checkbox" value="抽烟" @change="handleChange($event)">
        </label>
        <label>
            喝酒 <input type="checkbox" value="喝酒" @change="handleChange($event)">
        </label>
        <label>
            烫头 <input type="checkbox" value="烫头" @change="handleChange($event)">
        </label>
        <label>
            大保健 <input type="checkbox" value="大保健" @change="handleChange($event)">
        </label>
        <ul>
            <li v-for="(item,index) in arr">{{item}}</li>
        </ul>
    </div>

</body>

</html>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: 1910,
            radioVal: "男",
            checkVal: [],
            seletVal: 2000,
            arr:[]
        },
        // methods: {
        //     handleChange(e){
        //         let val = e.target.value;
        //           console.log(val);// 打印查看是选中的值
        //         if(this.arr.length>0){
        //             let flag = this.arr.includes(val);
        //             if(flag){
        //                 let index= this.arr.indexOf(val);
        //                 this.arr.splice(index,1)
        //             }else{
        //                 this.arr.push(val);
        //             }

        //         }else{
        //             this.arr.push(val);
        //         }
        //     }
        // },
    })


    /*
       v-model:双数据绑定
           v-model可以直接修改data中的属性值，当数据发生改变的时候视图也会发生改变

           v-model只能应该到form表单身上 其他元素无法使用

           v-model也有自己的修饰符 number  代表输入框里面的值是一个数字类型的

       底层原理
           Object.defindProperty来实现,在vue3.0中  将Object.defindProperty替换成了Proxy,
           通过给data中的每一个属性加一个数据劫持(给每一个属性加了一个getter/setter方法)

    */
</script>

 

posted @ 2019-08-07 17:34  野马,程序源改造新Bug  阅读(310)  评论(0)    收藏  举报