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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
vue.js封装switch开关组件的操作
Oct 26 Javascript
vue 数据双向绑定的实现方法
Mar 04 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原理之变量(Variables inside PHP)
2013/08/09 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
用Python编写web API的教程
2015/04/30 Python
详解python分布式进程
2018/10/08 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
python制作微博图片爬取工具
2021/01/16 Python
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
老师的检讨书
2014/02/23 职场文书
《掌声》教学反思
2014/02/23 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
就业协议书怎么填
2014/09/15 职场文书
停发工资证明范本
2015/06/12 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis