在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>
Comments | NOTHING