<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript setter, getter</title>
</head>
<body>
<input type="text" id="inputUsername" v-model="data.username">
<input type="text" id="inputPassword" οnkeyup="setValueByKey('password', this.value)">
<div id="username">admin</div>
<div id="password"></div>
<script>
function scanElementsByAttr(tag, attr) {
var aElements = document.getElementsByTagName(tag);
for (var i = 0; i < aElements.length; i++) {
var value = aElements[i].getAttribute(attr);
if (!value) {
continue;
}
aElements[i].onkeyup = function() {
var value = this.getAttribute(attr);
var arr = value.split('.');
if (arr.length == 1) {
window[arr[0]] = value;
return;
}
var data = window;
for (var i=0; i<arr.length-1; i++) {
data = data[arr[i]];
console.log(arr[i])
}
data[arr[i]] = this.value;
}
}
}
scanElementsByAttr('input', 'v-model');
var data = {
username: '',
password: '',
get username() {
return 'username:' + this.username;
},
get password() {
return 'password:' + this.password;
},
set username(value) {
document.getElementById('username').innerHTML = value;
},
set password(value) {
document.getElementById('password').innerHTML = value;
}
};
data.username = 'admin';
data.password = '123456';
function setValueByKey(k, v) {
console.log(k, v)
data[k] = v;
}
</script>
</body>
</html>