极客观点
项目管理
HarmonyOS
为什么点击修改变量值那个button，第一次有效果，手动修改input值后第二次点击按钮就没效果了呢，debug也执行到this.setAttribute('value', str)这句了，就是input中文字不改变，什么原因？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<input v-model="msg" type="text">
<div v-value="msg"></div>
<button id="change">修改变量值</button>
<br>
</body>
<script>
// 元素数组
var elements = [];
var body = document.getElementsByTagName('body')[0];
function getChildNodes(node) {
if (node.hasChildNodes() && node.nodeType == 1) {
for (var i = 0; i < node.children.length; i++) {
var child = node.children[i];
if (child.nodeName.toUpperCase() !== 'SCRIPT') elements.push(child)
getChildNodes(child)
}
}
}
getChildNodes(body)
// 初始化数据
var data = {
msg: 'Hello!'
};
var vCmd = {
// v-value
value: function (str) {
this.innerHTML = str;
},
// v-model
model: function (str) {
this.setAttribute('value', str)
}
}
// 扫描带'v-'指令的元素属性
var scan = function () {
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
for (var j = 0; j < element.attributes.length; j++) {
var attr = element.attributes[j];
if (attr.nodeName.indexOf('v-') >= 0) {
vCmd[attr.nodeName.slice(2)].call(element, data[attr.nodeValue]);
}
}
}
}
for (var k = 0; k < elements.length; k++) {
if (elements[k].nodeName.toUpperCase() === 'INPUT') {
elements[k].addEventListener('keyup', function (e) {
data['msg'] = e.target.value;
scan();
}, false);
}
}
document.getElementById('change').onclick = function () {
data.msg = 'change value'
}
setInterval(function () {
scan();
}, 500)
</script>
</html>
value不是attribute...所以用setAttribute是不科学的。
直接修改input的属性就好了
this.value = str