原文链接：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. BNU4206：单向行走

    给定一个m*n的矩阵,请写一个程序计算一条从左到右走过矩阵且权和最小的路径.一条路径可以从第1列的任意位置出发,到达第n列的任意位置.每一步只能从第i列走到第i+1列的同一行或者相邻行(第一行和最后一 ...

  2. RDO部署多节点OpenStack Havana(OVS+GRE)

    RDO是由红帽RedHat公司推出的部署OpenStack集群的一个基于Puppet的部署工具,可以很快地通过RDO部署一套复杂的OpenStack环境,当前的RDO默认情况下,使用Neutron进行 ...

  3. jQuery回溯

    1.jQuery有个很好用的方法是 end(); 2.在进行链式操作时,使用end方法,可以回溯到上一个jQuery对象. 3.实现原理: jQuery内部有一个对象栈,当形成新的对象时,会将新对象推 ...

  4. apply的调用 http://bbs.51js.com/thread-82017-1-3.html

    applay 这个是函数Function的方法为什么Array 也能调用这个函数?比如     function a (){           var kk = [];           kk = ...

  5. Minix2.0内核源代码的组织结构

    Minix2.0操作系统的源代码由两个目录组成:include/目录和src/目录 include/目录包含了操作系统所有的头文件(即.h文件) src/目录下包含了操作系统所有的源文件(.c或.s文 ...

  6. idea的svn插件中compare with the same repository version和compare with latest repository version的区别？

    Idea的svn插件中compare with the same repository version和compare with latest repository version的区别? 1.com ...

  7. [Android Tips] 31.如何将第三库引入的 Permission 删除掉

    Just declare the incriminated permission in your (main) Manifest with the tools:node="remove&qu ...

  8. 【node】------mongoose的基本使用------【巷子】

    1.安装mongoose npm install mongoose 2.启动数据库 mongod --dbpath d:\data\db 3.引入mongoose模块并连接数据库 const mong ...

  9. 关于typecho,404页面错误

    之前用typecho,但是没发现404错误页面; 现在只要发布文章就提示404页面错误. 解决方法 点击发布日期,将发布日期的分向后拖动几分钟: 然后发布,发现404错误不见了: 我是遇到这种情况了不 ...

  10. Hadoop生态上几个技术的解释：hive、pig、hbase 关系与区别

    hadoop生态圈 Pig 一种操作hadoop的轻量级脚本语言,最初又雅虎公司推出,不过现在正在走下坡路了.当初雅虎自己慢慢退出pig的维护之后将它开源贡献到开源社区由所有爱好者来维护.不过现在还是 ...