原文链接：http://www.jb51.net/article/99097.htm

V-MODEL 是VUE 的一个指令，在input 控件上使用时，可以实现双向绑定。

通过看文档，发现他不过是一个语法糖。

实际是通过下面的代码来实现的：

<%@ page language="java" contentType="text/html; charset=utf-8"

 pageEncoding="utf-8"%>

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <script type="text/javascript" src="vue/vue.js"></script>

</head>

<body>

 <div id="app-6">

 <input :value="person.name" @input="person.name = $event.target.value">

 <input :value="person.age" @input="person.age =$event.target.value">

 {{person}}

 </div>

 <script type="text/javascript">

 var app =new Vue({

 el: '#app-6',

 data:{

 person:{name:"ray",age:19}

 }

 })

 </script>

</body>

</html>
经测试：这里的：<input :value="person.name" @input="person.name = $event.target.value">如果data里没有对应的值，即使在这里写了value也是显示不出来的。

vue.js指令v-model实现方法的更多相关文章

  1. 第3章-Vue.js 指令扩展 和 todoList练习

    一.学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二.todoList练习效果展示 2.1.效果图展 ...

  2. 第2章-Vue.js指令

    一.学习目标 了解 什么 是 Vue.js 指令 理解 Vue.js 指令的 用途 掌握 Vue.js 指令的书写规范 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...

  3. vue.js指令总结

    1.v-html 用于输出真正html,而不是纯文本. 2.v-text 输出纯文本. <!DOCTYPE html> <html lang="en"> & ...

  4. Vue.js父子通信之所有方法和数据共享

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Vue devtool插件安装后无法使用，提示“vue.js not detected”的解决方法

    vue devtool下载 极简插件  github vue devtool安装 点击谷歌浏览器箭头所指图标-更多工具-扩展程序   ①:直接将后缀为crx的安装包拖进下图区域即可自动安装     ② ...

  6. vue.js使用更简单的方法制作带删除功能的tooolist

    今天复习了下vue.js,先做了个基本版的todolist,做完后自己想加个删除本项的按钮.一开始做没啥头绪了,试了试无果,查了一把后发现网上的那些方法真的是麻烦,自己动手丰衣足食,自己最后换了思路试 ...

  7. vue.js 源代码学习笔记 ----- 工具方法 option

    /* @flow */ import Vue from '../instance/index' import config from '../config' import { warn } from ...

  8. vue.js 源代码学习笔记 ----- 工具方法 env

    /* @flow */ /* globals MutationObserver */ import { noop } from 'shared/util' // can we use __proto_ ...

  9. vue.js 源代码学习笔记 ----- 工具方法 share

    /* @flow */ /** * Convert a value to a string that is actually rendered. { .. } [ .. ] 2 => '' */ ...

随机推荐

  1. Spring学习笔记--声明一个简单的Bean

    spring依赖的maven dependencyhttp://mvnrepository.com/artifact/org.springframework 在pom.xml中添加如下依赖: < ...

  2. JAVA中替换字符的方法replace和replaceAll 区别

    replace和replaceAll是JAVA中常用的替换字符的方法,它们的区别是:1)replace的参数是char和CharSequence,即可以支持字符的替换,也支持字符串的替换(CharSe ...

  3. 测试sql语句性能，提高执行效率

    为了让您的程序执行的效率更高,SQL的效率一定不可忽视. 现有以下方法去检测SQL的执行效率. 对于多表查询的效率测试: )直接from ,where方式. SET STATISTICS io ON ...

  4. web图片100%宽度自适应,高度不塌陷

    一般在web端图片100%自适应,在页面加载的时候存在高度塌陷的问题 解决这个问题其实很简单,用padding-top设置百分比值来实现自适应,公式如下 padding-top = (Image He ...

  5. Eclipse打包Egret App （Egret4.1.0）

    Egret官方提供eclipse和androidstudio打包. 这里使用eclipse. 1 下载配置android环境 2 Egret打包App 3 Eclipse设置 4 Eclipse调试 ...

  6. nodejs 重定向 (redirect + writeHead(Location))

    参考: Node.js实现301.302重定向服务 Express URL跳转(重定向)的实现:res.location()与res.redirect() 一 方式1 index.js var htt ...

  7. jpa关联映射(一）

    开发中常用到数据表的关联(其实很难遇到..),spring-data-jpa(其实是hibernate)提供了一整套十分方便的注解来供我们使用表关联功能. OneToOne OneToMany Man ...

  8. centos7 安装后，出现Please make your choice from above ['q' to quit | 'c' to continue | 'r' to refresh]

    PS:出现以上信息,是要求你阅读或者接收协议: Initial setup of CentOS Linux 7 (core)解决步骤如下: 1,输入[1],按Enter键阅读许可协议,2,输入[2], ...

  9. 删除Excel中的复选框等控件

  10. vue报错 vue-cli 引入 stylus 失败

    1.1.1.   vue-cli 引入 stylus 失败 先通过vue-cli的webpack模板建立文件夹: vue init webpack test-stylus 然后安装依赖 npm ins ...