原文链接：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. PyQt4预定义对话框

    PyQt4中的对话框 对话窗口和对话框是现代GUI应用程序必不可少的一部分.生活中“对话”被定义为发生在两人或更多人之间的会话.而在计算机世界,“对话”则时人与应用程序之间的“会话”.人及对话的形式有 ...

  2. .Net Core 使用EF Core方法

    新建项目后,使用NuGet安装包: Install-Package Microsoft.EntityFrameworkCore Install-Package Microsoft.EntityFram ...

  3. poj_3185 反转问题

    题目大意 有20个碗排成一排,有些碗口朝上,有些碗口朝下.每次可以反转其中的一个碗,但是在反转该碗时,该碗左右两边的碗也跟着被反转(如果该碗为边界上的碗,则只有一侧的碗被反转).求最少需要反转几次,可 ...

  4. MUI ajax数据请求（list）

    服务器返回格式 { "code": "1001", "message": "查询成功", "data" ...

  5. mac必备软件

    LigthPaper:Markdown工具 ssh工具:ShellCraft

  6. OC开发_Storyboard——绘制和视图

    1.绘制 不要调用drawRect.调用setNeedsDisplay相当于告知系统视图需要重绘, 它会去调用drawRect,更新屏外缓冲器 2.UIBezierPath绘制图形,   设置图像op ...

  7. angular -- 无刷新做分页

    无刷新做分页参考地址: http://www.jq22.com/demo/angular201707111100/ 示例代码: <!DOCTYPE html> <html lang= ...

  8. Linux系列-Xshell连接本地VMware安装的Linux虚拟机

    一.安装VMwareWorkstation并安装RedHat虚拟机,这里安装步骤省略,网络的资料很多,大侠们不如百度或者谷歌一下,大把的资料. 二.打开本地电脑的“网络连接”,你会发现多出了2个网络适 ...

  9. JIRA licence crack and etc

    https://my.oschina.net/u/199525/blog/313788 http://blog.csdn.net/joinandjoin/article/details/9052785 ...

  10. Doing Homework---hdu1074（状态压缩&&记忆化搜索）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1074 有n(n<=15)门课需要做作业,每门课所需时间是used_time以及每门课作业上交的最 ...