jquery,js简单实现类似Angular.js双向绑定

刚了解了下Angular.js，发现Angular.js绑定数据方面非常方便，套下教程demo:

<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>

我就想着，使用jq/js怎么实现类似的效果，后来找找，发现使用propertychange可以实现。

JQ：

<div class="wrap">
<textarea></textarea>
<div class="miss"></div>
</div>

$('textarea').on('input propertychange', function() {
$('.miss').html($(this).val().length + "~"+$(this).val());
});

JS:

var txt = document.querySelector("textarea"),
msg = document.querySelector(".miss");
//不兼容IE8 以下
txt.addEventListener("input",function () {
msg.innerHTML = this.value + "~"+this.value.length;
},false)

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

• 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
• 深入理解vue.js双向绑定的实现原理
• Vue.js第一天学习笔记（数据的双向绑定、常用指令）
• Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）
• Vue.js每天必学之数据双向绑定
• 使用Object.defineProperty实现简单的js双向绑定
• 实例剖析AngularJS框架中数据的双向绑定运用
• 深入学习AngularJS中数据的双向绑定机制
• 轻松实现javascript数据双向绑定
• 浅谈angular.js中实现双向绑定的方法$watch $digest $apply