Vue-1之双向数据绑定

最新推荐文章于 2022-06-12 11:20:27 发布

经年未远

最新推荐文章于 2022-06-12 11:20:27 发布

阅读量137

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_42628504/article/details/105781545

版权

<body>
<input type="text" id="input">
<script>
 // Vue双向数据绑定就是应用了这个方法
let data ={};
let temp= {};
Object.defineProperty(data,"a",{
  /*
    enumerable:true,          //定义是否能被遍历      true 默认是false
    configurable:false,       //定义属性是否能被删除 true  默认是 false
    writable:true,           //定义属性是否能被重新设置  默认是false  不可读写
    value:1,
    */
    get(){           //获取data的a属性时候会触发的函数
        return  temp.a;
    },

    set(value){   //设置data 的a属性时候会触发的函数
       temp.a = value;
       input.value=  value;
    }
})

    //在文本框中输入对应的数据会触发对应的函数
    input.addEventListener("input",function(){
        data.a = this.value;
    });
</script>

********************************Es%方法实现双向数据绑定*******************************************************
<input id="goodsnum">
		<input id="goodsprice">
		<input id="total">
		<script type="text/javascript">
			var goodsnumInput = document.getElementById("goodsnum");
			var goodspriceInput = document.getElementById("goodsprice");
			var totalInput = document.getElementById("total");

			var obj = {
				goodsnum: 0,
				goodsprice: 100,
			}

			goodsnumInput.oninput = function() {
				obj._goodsnum = this.value * 1;

			}

			goodspriceInput.oninput = function() {
				obj._goodsprice = this.value * 1;
			}

			goodsnumInput.value = obj.goodsnum;
			goodspriceInput.value = obj.goodsprice;
			totalInput.value = obj.goodsnum * obj.goodsprice;

			Object.defineProperty(obj, "_goodsnum", {
				set(num) {
					this.goodsnum = num;
					totalInput.value = this.total;
				}
			})

			Object.defineProperty(obj, "_goodsprice", {
				set(price) {
					this.goodsprice = price;
					totalInput.value = this.total;

				}
			})

			Object.defineProperty(obj, "total", {
				get() {
					return this.goodsprice * this.goodsnum;

				}
			})
		</script>
****************************************************************************************
<div id="app">
 <input type="text"  v-model="arr">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

let vm = new Vue({
    el:"#app",
    data:{     //vue操作的数据集合
        a:1,
        b:2,
        arr:[1,3,4,4],
        obj:{
            name:"黄",
            age:23
        }
    }
});

给对象添加响应式此方法作用是可以在Vue对象实例化之后添加响应式
vm.$set(vm.obj,“sex”,“女”)

  获取data选项中的a 可以通过 vm.a或者vm.$data.a

  vm.$data.arr===vm.arr true

  如果要使视图中的数组发生改变 需要使用数组的变异方法

  push pop shift unshift splice sort reverse   改变原来数组的方法

  特例:  vue不能检测数组的length 对象属性的增加和删除

  */

经年未远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-1之双向数据绑定

<body><input type="text" id="input"><script> // Vue双向数据绑定就是应用了这个方法let data ={};let temp= {};Object.defineProperty(data,"a",{ /* enumerable:true, //定义是否能被遍历 ...
复制链接

扫一扫