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雙向綁定和依賴反轉實例詳解
- 使用Object.defineProperty實現(xiàn)簡單的js雙向綁定
- 輕松實現(xiàn)javascript數(shù)據(jù)雙向綁定
- js實現(xiàn)視圖和數(shù)據(jù)雙向綁定的方法分析
相關文章
jQuery實現(xiàn)左右兩個列表框的內(nèi)容相互移動功能示例
這篇文章主要介紹了jQuery實現(xiàn)左右兩個列表框的內(nèi)容相互移動功能,涉及jQuery事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-01-01js制作帶有遮罩彈出層實現(xiàn)登錄注冊表單特效代碼分享
這篇文章主要為大家詳細介紹了js制作帶有遮罩彈出層實現(xiàn)登錄注冊表單代碼特效,推薦給大家,有需要的小伙伴可以參考下。2015-09-09