原文链接：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. C++Primer 异常处理

    异常是指存在于运行时的反常行为,这些行为超出了函数正常功能的范围. 检测出问题的部分发出某信号表明程序遇到了故障,而且信号的发出方无须知道故障将在何处得到解决. 异常处理机制为程序中异常检测和异常处理 ...

  2. JS 添加js节点

    function AddScriptNode(src) { var N = document.createElement("script"); N.setAttribute(&qu ...

  3. openstack 爬坑日记

    这个问题官方文档应该付全部责任.​ 关于 endpoint regionOne 问题 ​官方文档的所有endpoint 创建命令都是使用的regionOne,但是这个配置项必须和相关的组件ini 文件 ...

  4. Excel 2010版筛选怎么用

    很多人在使用excel表格的时候,不知道这个筛选功能怎么用,可以对我们平时做数据和表格带来哪些帮助.那么,接下来,小敏以excel表格2010版为例,跟大家分享一下这个excel表格筛选功能的使用方法 ...

  5. url-loader与file-loader

    一开始用url-loader的时候,想着为什么npm run build的时候,不能将图片打包到build images的目录下,原来,没有自己看这样的说明: loader 后面 limit 字段代表 ...

  6. python 进行抓包嗅探

    一.绪论 最近一直想弄一个代理,并且对数据包进行解读,从而完成来往流量的嗅探.于是今天学习了一下如何使用Python抓包并进行解包. 首先要用到两个模块 dpkt(我这边ubuntu16.04 LTS ...

  7. Jenkins反序列化漏洞cve-2017-1000353

    一.漏洞原理: 本地没有环境:参考:https://blogs.securiteam.com/index.php/archives/3171    进行学习理解记录. 首先这是一个java反序列化漏洞 ...

  8. js嵌套轮播图

    $(function(){ var navLi = $(".top_nav").find("li"), conDiv = $(".top_con&qu ...

  9. nutch 1.7导入Eclipse

    1.下载Nutch1.7的包 apache-nutch-1.7-src.zip,解压之后应该包括 bin,conf,src等目录 2.将解压之后的 apache-nutch-1.7 文件夹放到ecli ...

  10. Service简介 demos

    extends:http://blog.csdn.net/ithomer/article/details/7364024 一. Service简介 Service是android 系统中的四大组件之一 ...