您的位置：首页 > Web前端 > JQuery

使用原生js onkeyup+jQuery实现简单的双向数据绑定

2017-08-30 14:40 741 查看
原理非常简单 浅显易懂 使用onkeyup事件监听文本框的变化 并触发一个复制的函数 即可实现实时双向数据绑定

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<input id="source" type="text" onkeyup="dataBander()" />
<span id="textValue"></span>
<script type="text/javascript">
function dataBander(){
var $source = $("#source").val();
$("#textValue").html($source);
}
</script>
</body>
</html>


第一次写博客，对js了解得也不是特别的深入，这个示例没有考虑任何性能问题，不过确实是好用的，跟AngularJS实现效果是一样的，有什么不正确的地方，欢迎吐槽^_^
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery javascript
相关文章推荐
新的分享
章节导航