javascript - 实现一个简单的双向绑定的问题
本文介绍了javascript - 实现一个简单的双向绑定的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
为什么点击修改变量值那个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
这篇关于javascript - 实现一个简单的双向绑定的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
