<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
     <div id="vue-app">
         <h1>双向数据绑定 /input / select /textarea</h1>
         <label>姓名:</label>
         <!-- <input type="text" @keyup.enter="logName"> -->
         <input ref="msg" type="text" v-on:keyup="logName">

         <input  type="text" v-model="name">
         <p>{{ name }}</p>
         <label>年龄</label>
         <input ref="age" type="text" v-on:keyup="logAge">
         <span>{{ age }}</span>
     </div>

     <script src="app.js"></script>
 </body>
 </html>

数据双向绑定 HTML

 new Vue({
     el:'#vue-app',
     data:{
         name:'',
         age:''
     },
     methods:{
         logName:function(){
             //console.log('你在输入名称');
             // this.name=this.$refs.name.value;
             console.log(this.$refs.msg.value)
         },
         logAge:function(){
             // console.log('你在输入年龄');
             this.age=this.$refs.age.value;
         }
     }
 })

Vue.js

Vue 数据的双向绑定的更多相关文章

  1. Vue源码解析---数据的双向绑定

    本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...

  2. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  3. 组件的通信 ：provide / inject 对象进入后，就等于不用props，然后内部对象，直接复制可以接受数组，属性不能直接复制，可以用Object.assgin覆盖对象，或者Vue的set 双向绑定数据

    组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...

  4. Vue框架之双向绑定事件

    Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...

  5. 用ES6的class模仿Vue写一个双向绑定

    原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...

  6. vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定

    vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...

  7. JavaScript实现数据的双向绑定

    接触到Angulr.js和Vue.js后,提到最多的就是双向绑定 下面将用JavaScript实现数据的双向绑定 <!DOCTYPE html> <html> <head ...

  8. 通过原生js实现数据的双向绑定

    通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...

  9. 数据的双向绑定 Angular JS

    接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...

随机推荐

  1. 福州大学软件工程W班-助教总结

    背景 福州大学软件工程W班,总人数46人,讲师汪老师. 前期期望 希望自己能够在课程当中起到引导作用,发挥助教最大的用处. 实际执行情况 第一个问题是自动化测试工具,该工具主要是用来测试程序WordC ...

  2. 深入jUI（DWZ）

    -----------------------------------------------------------------------------主页面index.html <html& ...

  3. A*寻路初探（转载）

    启发式搜索:启发式搜索就是在状态空间中的搜索对每一个搜索的位置进行评估,得到最好的位置,再从这个位置进行搜索直到目标.这样可以省略大量无畏的搜索路径,提到了效率.在启发式搜索中,对位置的估价是十分重要 ...

  4. springboot 集成dubbo

  5. 五， Authentication和Permissions

    概述 在介绍Django REST Framework(二):Request和Response 时提到,DRF提供了对身份验证和权限的处理机制,特点如下: 1.对API的不同部分使用不同的认证策略: ...

  6. Python基础学习Day5 字典的增、删、改、查的用法 分别赋值

    一.字典的介绍 字典:字典是Python的基础数据类型之一:字典可以存储大量数据,关系型数据. 同样是Python中唯一的映射类数据类型.         数据类型的分类:        可变的数据类 ...

  7. SPSS-非参数检验

    非参数检验(卡方(Chi-square)检验.二项分布(Binomial)检验.单样本K-S(Kolmogorov-Smirnov)检验.单样本变量值随机性检验(Runs Test).两独立样本非参数 ...

  8. struts原理图

    n the diagram, an initial request goes to the Servlet container (such as Jetty or Resin) which is pa ...

  9. js判断是否为undefined

    typeof(isadmin)=="undefined"需要使用typeof才能判断

  10. Retrofit 打印log时，中文会显示类似%E8%BE%BD字符

    https://blog.csdn.net/honghailiang888/article/details/54289632?utm_source=blogxgwz6 参照Android Retrof ...