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

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • Vue.js每天必学之数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值 文本 数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新. 你也可以只处理

  • Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）

    Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 接下来给大家介绍vuejs单向绑定.双向绑定.列表渲染.响应函数基础知识,具体详情如下所示: (一)单向绑定 <div id="app"> {{ message }} </div> <sc

  • 轻松实现javascript数据双向绑定

    双向数据绑定指的是当对象的属性发生变化时能够同时改变对应的UI,反之亦然.换句话说,如果我们有一个user对象,这个对象有一个name属性,无论何时你对user.name设置了一个新值,UI也会展示这个新的值.同样的,如果UI包含一个用于数据用户名字的输入框,输入一个新值也会导致user对象的name属性发生相应的改变. 许多流行的javascript框架,像Ember.js,Angular.js或者KnockoutJS都会把双向数据绑定作为其中的主要特性来宣传.这并不意味着从头开始实现它很难,

  • 使用Object.defineProperty实现简单的js双向绑定

    缘起 前几天在看一些流行的迷你mvvm框架(比如avalon.js. vue.js 这种较轻的框架,而非Angularjs.Emberjs这种较重的框架)的实现.现代流行的mvvm框架一般都会将数据双向绑定(two-ways data binding)做掉,作为框架自身的一个卖点( Ember.js 貌似是不支持数据双向绑定的.),而且每种框架双向数据绑定的实现方式都不太一致,比如Anguarjs内部使用的是 脏检查 ,而avalon.js内部实现方式的本质是设置 属性访问器 . 这里不打算具体

  • 深入学习AngularJS中数据的双向绑定机制

    Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好.双向数据绑定可能是AngularJS最酷最实用的特性,将MVC的原理展现地淋漓尽致. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入.AngularJS将会遍历DOM模

  • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

  • 深入理解vue.js双向绑定的实现原理

    深入理解vue.js双向绑定的实现原理

    前言 大家都知道Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少的代码实现那个hello world开篇示例. 一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义. var obj = { }; // 为obj定义一个名为hello的访问器属性 Object.defin

  • Vue.js第一天学习笔记（数据的双向绑定、常用指令）

    Vue.js第一天学习笔记（数据的双向绑定、常用指令）

    数据的双向绑定(ES6写法) 效果: 没有改变 input 框里面的值时: 将input 框里面的值清空时: 重新给  input 框输入  豆豆 后页面中  span  里绑定{{testData.name}}的值随着 input 框值的变化而变化. 在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定.并且v-model指令只能用于:<input>.<select>.<textarea>这三种标签. <template> <div

  • 浅谈angular.js中实现双向绑定的方法$watch $digest $apply

    Angular.js 中的特性,双向绑定. 多么神奇的功能,让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. '参数' 就是$scope

  • 实例剖析AngularJS框架中数据的双向绑定运用

    实例剖析AngularJS框架中数据的双向绑定运用

    数据绑定 通过把一个文本输入框绑定到person.name属性上,就能把我们的应用变得更有趣一点.这一步建立起了文本输入框跟页面的双向绑定. 在这个语境里"双向"意味着如果view改变了属性值,model就会"看到"这个改变,而如果model改变了属性值,view也同样会"看到"这个改变.Angular.js 为你自动搭建好了这个机制.如果你好奇这具体是怎么实现的,请看我们之后推出的一篇文章,其中深入讨论了digest_loop 的运作. 要建立

随机推荐