jquery,js簡單實現(xiàn)類似Angular.js雙向綁定
更新時間:2017年01月13日 08:53:54 作者:carry~MF
本文主要介紹了jquery,js簡單實現(xiàn)類似Angular.js雙向綁定的方法。具有一定的參考價值,下面跟著小編一起來看下吧
剛了解了下Angular.js,發(fā)現(xiàn)Angular.js綁定數(shù)據(jù)方面非常方便,套下教程demo:
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你輸入了: {{name}}</h1>
</div>
我就想著,使用jq/js怎么實現(xiàn)類似的效果,后來找找,發(fā)現(xiàn)使用propertychange可以實現(xiàn)。
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)
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
您可能感興趣的文章:
- 詳解Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)
- JS數(shù)據(jù)雙向綁定原理與用法實例分析
- Nuxt.js 數(shù)據(jù)雙向綁定的實現(xiàn)
- Vue.js單向綁定和雙向綁定實例分析
- Vue.js 踩坑記之雙向綁定
- js最簡單的雙向綁定實例講解
- JS原生數(shù)據(jù)雙向綁定實現(xiàn)代碼
- AngularJS雙向綁定和依賴反轉(zhuǎn)實例詳解
- 使用Object.defineProperty實現(xiàn)簡單的js雙向綁定
- 輕松實現(xiàn)javascript數(shù)據(jù)雙向綁定
- js實現(xiàn)視圖和數(shù)據(jù)雙向綁定的方法分析
相關(guān)文章
jQuery實現(xiàn)左右兩個列表框的內(nèi)容相互移動功能示例
這篇文章主要介紹了jQuery實現(xiàn)左右兩個列表框的內(nèi)容相互移動功能,涉及jQuery事件響應及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
js制作帶有遮罩彈出層實現(xiàn)登錄注冊表單特效代碼分享
這篇文章主要為大家詳細介紹了js制作帶有遮罩彈出層實現(xiàn)登錄注冊表單代碼特效,推薦給大家,有需要的小伙伴可以參考下。2015-09-09

