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 document.createDocumentFragment()
Apr 04 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
jQuery实现简单全选框
Sep 13 jQuery
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
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
下载官网python并安装的步骤详解
2019/10/12 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
物理教师自荐信范文
2013/12/28 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
创业女性典型材料
2014/05/02 职场文书
室内趣味活动方案
2014/08/24 职场文书
2015年见习期工作总结
2014/12/12 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers