<!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. canvas入门笔记

    1.Canvas的使用注意  A.要在页面中添加一对canvas标记,默认占300*150的区域  B.我们可以通过html属性‘width’,‘height’来设置canvas的宽高,不可以通过cs ...

  2. C# 基础 new 、override实现多台区别

    一.new只是隐藏父类中的同名方法.基类和父类中都存在这个方法. namespace ConsoleApplication1 { class Program { static void Main(st ...

  3. 吴裕雄 31-MySQL 导出数据

    MySQL中你可以使用SELECT...INTO OUTFILE语句来简单的导出数据到文本文件上. show global variables like '%secure%';SHOW VARIABL ...

  4. 吴裕雄 04-mysql创建数据库

    ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'admin'; CREATE DATABASE 数据库名 ...

  5. python使用cv2显示图片像素值

    给定一张灰度图,显示这张图片的像素值 def show_image_pixel(img): ''' :param img: 需要输出像素值的图像,要求是灰度图 :return: 无返回值 ''' he ...

  6. Linux基本操作指令

    Linux操作指令 到达当前用户目录:cd ~ 获得管理员权限执行:sudo 解压缩:tar -zxf XXX.tgz 安装包:dpkg -i XXX.deb 通过链接下载文件:wget  http: ...

  7. Java中的IO流，Input和Output的用法，字节流和字符流的区别

    Java中的IO流:就是内存与设备之间的输入和输出操作就成为IO操作,也就是IO流.内存中的数据持久化到设备上-------->输出(Output).把 硬盘上的数据读取到内存中,这种操作 成为 ...

  8. sqlmap自动注入

    基于python2.7开发 git clone https://github.com/sqlmapproject/sqlmap.git sqlmap-dev

  9. java多线程与并发笔记

    0.多线程,主要用来提高程序效率,处理耗时的操作. 多个线程写在同一个类里调用,并不是说写在前面的线程就会先运行.各个线程会进行争抢,能抢到系统资源的才会先运行. 因此,同一个程序,多个线程运行,可能 ...

  10. sqoop2 缺少 jackson-core-asl-1.8.8.jar 和 jackson-mapper-asl-1.8.8.jar 这两个jar包

    [root@spark2 client]# cat /var/log/sqoop2/localhost.2017-12-22.log 十二月 22, 2017 10:29:17 上午 org.apac ...