<!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. Android DevArt1：假设当前Activity为A,如果这时用户打开一个新的Activity B,那么B的onResume和A的onPause哪个先执行呢？

    问题描述:假设当前Activity为A,如果这时用户打开一个新的Activity B,那么B的onResume和A的onPause哪个先执行呢? GitHub Demo 废话少说,上代码,Activi ...

  2. 为了显示此页面，Firefox 必须发送将重复此前动作的数据（例如搜索或者下订单）

    火狐浏览器重新加载页面出现下面提示,必须要点击“重新发送”才能完成刚才的请求: 这个是火狐的一个提示功能主要是防止同一页面的数据反复提交: 解决方法: 不要用location.reload();来刷新 ...

  3. python 如何注释

    一.单行注释     单行注释以#开头,例如:    print 6 #输出6 二.多行注释     (Python的注释只有针对于单行的注释(用#),这是一种变通的方法)     多行注释用三引号' ...

  4. Pandas统计分析

    Pandas统计分析 pandas数据的基本统计分析 和numpy的函数近似 dates = pd.date_range(',periods=10) dates df = pd.DataFrame(n ...

  5. h5做列表 水平分割

    移动端H5各种各样的列表的制作方法(三) by FungLeo 移动端H5各种各样的列表的制作方法(三) by FungLeo 前情回顾 在上一篇博文<移动端各种各样的列表的制作方法(二)> ...

  6. vue 异步请求

    摘自 ECMAScript 6 简介: 大家习惯将 ECMAScript 6.0 简称为 ES6,它是 Javascript 语言的下一代标准,它的目标,是使得 Javascript 语言可以用来编写 ...

  7. JAVA第五周 动手动脑

    public class Example { int x = 3;//类的实例变量,初始化值为3 static int y = 4;//类的静态变量,初始化值为4 public static void ...

  8. Spring-session redis 子域名 session

    Spring-session & redis 子域名共享session 例子: a.example.comb.example.comSpring 版本 4.2.6.RELEASE Spring ...

  9. CentOS YUM 安装 TOMCAT6

    安装tomcat6 1 yum install tomcat6 tomcat6-webapps tomcat6-admin-webapps 启动tomcat6 1 service tomcat6 st ...

  10. 数据持久化PlayerPrefs

    1.Unity3D中的数据持久化是以键值对的形式存储的,可以看作是一个字典 2.Unity3D中的值是通过键名来读取的,当值不存在时,返回默认值 3.在Unity中只支持int.float.strin ...