Vue双向绑定底层原理

在vue中,我们很容易实现双向绑定(输入什么出什么)

 <div id="app">
<input type="text" v-model="msg">
    
    <h3>{{msg}}</h3>
 //这样可以以达到输入什么,显示什么
</div>

如果在原生中就实现就比较困难了

 <!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="ipt" value="" oninput="iptChange(this.value)" />
    <h3 id="title"></h3>
</body>
</html>
<script>
// 获取元素
var ipt = document.getElementById('ipt');
var title = document.getElementById('title');
 
// 声明一个data对象，专门用来放数据
var data = {};
 
// 用来给对象动态添加属性  define-定义   Property-属性
// Object.defineProperty(对象的名称, 属性的名称, 配置项)
// get代表定义这个msg时要给他赋值的数据
// set代表当你拿到最新的值时，你想要去做什么事
Object.defineProperty(data, 'msg', {
    get: function(){
        return "你好世界"
    },
    set: function(newVal){
        // console.log(newVal)  // msg已经被修改了
        title.innerHTML = newVal;
        ipt.value = newVal;
    }
})
 
// console.log(data.msg)
title.innerHTML = data.msg;
ipt.value = data.msg;
 
// input值发生了改变
function iptChange(val){
    // 修改数据源（data.msg），会自动触发set方法
    data.msg = val;     
}
</script>

uni-app安卓开发中的大坑

Webpack中动态图片路径的解决办法

Sakura

Comments | NOTHING

取消回复

Sakura个人博客

	<div id="app">
	<input type="text" v-model="msg">

	<h3>{{msg}}</h3>
	//这样可以以达到输入什么,显示什么
	</div>

	<!DOCTYPE html>
	<html lang="zh_cn">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<input type="text" id="ipt" value="" oninput="iptChange(this.value)" />
	<h3 id="title"></h3>
	</body>
	</html>
	<script>
	// 获取元素
	var ipt = document.getElementById('ipt');
	var title = document.getElementById('title');

	// 声明一个data对象，专门用来放数据
	var data = {};

	// 用来给对象动态添加属性 define-定义 Property-属性
	// Object.defineProperty(对象的名称, 属性的名称, 配置项)
	// get代表定义这个msg时要给他赋值的数据
	// set代表当你拿到最新的值时，你想要去做什么事
	Object.defineProperty(data, 'msg', {
	get: function(){
	return "你好世界"
	},
	set: function(newVal){
	// console.log(newVal) // msg已经被修改了
	title.innerHTML = newVal;
	ipt.value = newVal;
	}
	})

	// console.log(data.msg)
	title.innerHTML = data.msg;
	ipt.value = data.msg;

	// input值发生了改变
	function iptChange(val){
	// 修改数据源（data.msg），会自动触发set方法
	data.msg = val;
	}
	</script>