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


Posted in Javascript onJanuary 13, 2017

刚了解了下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)

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
jquery默认校验规则整理
Mar 24 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
基于js 本地存储(详解)
Aug 16 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 #Javascript
js实现淡入淡出轮播切换功能
Jan 13 #Javascript
js仿百度音乐全选操作
Jan 13 #Javascript
js实现tab选项卡切换功能
Jan 13 #Javascript
js制作可以延时消失的菜单
Jan 13 #Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 #Javascript
js实现自动轮换选项卡
Jan 13 #Javascript
You might like
php实现单链表的实例代码
2013/03/22 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
tensorflow实现KNN识别MNIST
2018/03/12 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
Python实现登陆文件验证方法
2018/10/06 Python
NumPy中的维度Axis详解
2019/11/26 Python
Python序列类型的打包和解包实例
2019/12/21 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
运动会稿件50字
2014/02/17 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
学生会部长竞聘书
2014/03/31 职场文书
消防标语大全
2014/06/07 职场文书
安全演讲稿开场白
2014/08/25 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
民主生活会汇报材料
2014/12/15 职场文书
离婚协议书范文
2015/01/26 职场文书
离职信范文
2015/06/23 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技