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之水平横向滚动歌词同步的应用
May 07 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
js获取class的所有元素
Mar 28 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
JavaScript中isPrototypeOf函数
Nov 07 Javascript
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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
PHP asXML()函数讲解
2019/02/03 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
Python列表删除的三种方法代码分享
2017/10/31 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
Python读写docx文件的方法
2018/05/08 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
python 字符串常用函数详解
2019/09/11 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书
优秀实习生感言
2014/03/01 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
校长个人总结
2015/03/03 职场文书
2016新年感言
2015/08/03 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
React中的Context应用场景分析
2021/06/11 Javascript