<!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. avalon2学习教程02之vm

    avalon2的vm是一个非常重要的东西,其设计原型最初脱胎于knockout.js,但到avalon1.6中,终于寻得自己的方案,更精简,更易用,更魔幻. vm是一种特殊的数据结构,看起来像普通对象 ...

  2. ReultSet有什么作用和使用

    结果集(ResultSet)是数据中查询结果返回的一种对象,可以说结果集是一个存储查询结果的对象,但是结果集并不仅仅具有存储的功能,他同时还具有操纵数据的功能,可能完成对数据的更新等. int col ...

  3. angularjs 做不到实时脏值查询

    angularjs 做不到脏值查询 ,数据请求过来,不操作其他按钮,请求的值就是展示不出来:(相当于,只有手动触发,angularjs内部才会把脏值查询出来): 解决办法:在请求过来的值旁边加上$sc ...

  4. c# vs2013部署项目

    http://demo.netfoucs.com/shinepan/article/details/24865931

  5. GIS案例学习笔记-ArcGIS整图大图出图实例教程

    GIS案例学习笔记-ArcGIS整图大图出图实例教程 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 1. 通过出图比例尺(1:2000),地图范围测算图纸大小. 图 ...

  6. C# 图像处理:将图像(24位真彩)转为 8位灰度图像 采用了内存法,大大提高了效率

    /// <summary> /// 将源图像灰度化,并转化为8位灰度图像. /// </summary> /// <param name="original&q ...

  7. H5做的商城客户端，效果很不错

    H5做的商城客户端,效果很不错 H5做的商城客户端,效果和android原生客户端没多大区别,现在h5是越来越火了, android的小伙伴们又遇到一个新的挑战了.本项目只能学习一下WebViewAc ...

  8. 模块移除 命令rmmod 的实现

    // rmmod.c #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include < ...

  9. lcd 显示屏

    1.lcd 接口信号: VSYNC : 一帧新数据的开始信号 HSYNC :一行新数据的开始信号 VCLK   :像素的同步信号 VD[0:23]  :传递数据的信号线 2. LCD  的显示原理 ( ...

  10. 面试真题-----hashMap原理

    HashMap详解   JDK1.8对HashMap底层的实现进行了优化,例如引入红黑树的数据结构和扩容的优化等 简介 Java为数据结构中的映射定义了一个接口java.util.Map HashMa ...