<!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. 零基础用Docker部署微服务

    1. docker架构 这里的Client和DOCKER_HOST(docker server)都是在本地的,docker仓库Registry是在远程的: Client的docker命令通过Docke ...

  2. export default 与 export

    export default 只能导出一个 可以用任意的变量来接收 export 可以暴露多个成员,需要用 import {} 接受成员 需要用名字接受 名字必须跟导出名字一致  //或者as作为别名 ...

  3. 解决iframe在iphone不兼容的问题

    <div class="scroll-wrapper"> <iframe src="地址"></iframe> </d ...

  4. apt-get出现的问题

    报的错 E: 无法获得锁 /var/cache/apt/archives/lock – open (11 资源临时不可用) E: 无法锁定下载目录 解决方法一: #:ps -aux (列出进程,形式如 ...

  5. java.lang.IllegalAccessError: tried to access method

    java.lang.IllegalAccessException: access to method denied 06-23 16:12:39.128 1253-1253/com.hbjyjt.oa ...

  6. spring init method destroy method

    在java的实际开发过程中,我们可能常常需要使用到init method和destroy method,比如初始化一个对象(bean)后立即初始化(加载)一些数据,在销毁一个对象之前进行垃圾回收等等. ...

  7. ServiceWorker.state

    [ServiceWorker.state] ServiceWorker.state The state read-only property of the ServiceWorker interfac ...

  8. cupp字典生成器使用

    下载: clone git https://github.com/Mebus/cupp.git

  9. pngencoder图像转换jar

    PngEncoder - convert a Java Image to PNGPngEncoderB - convert a Java BufferedImage to PNG Written by ...

  10. oracle 创建包体的一些问题

    1. PLS-00201:必须声明标识符'A1' PLS-00304: 如果没有说明, 则无法编译'A1'主体 解决办法: 用sysdba身份 把A1包的执行权限给这个用户. 举例: 1.C:\Use ...