原文链接：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. Microchip编译器产品线—MPLAB XC简介

    以下为Microchip最新编译器产品线—MPLAB-XC简介 MPLAB-XC:适合所有PIC单片机和项目的编译器解决方案 Microchip最新编译器产品线—MPLAB-XC为项目开发的软件需求提 ...

  2. 深入浅出Docker（五）：基于Fig搭建开发环境

    概述 在搭建开发环境时,我们都希望搭建过程能够简单,并且一劳永逸,其他的同事可以复用已经搭建好的开发环境以节省开发时间.而在搭建开发环境时,我们经常会被复杂的配置以及重复的下载安装所困扰.在Docke ...

  3. 深入浅出Docker（二）：Docker命令行探秘

    1. Docker命令行 Docker官方为了让用户快速了解Docker,提供了一个交互式教程,旨在帮助用户掌握Docker命令行的使用方法.但是由于Docker技术的快速发展,此交互式教程已经无法满 ...

  4. console.log()的兼容性

    在别人那里看到的,兼容IE8-的console.log的实现,以前没想过. if(typeof console == "undefinde"){ this.console = {l ...

  5. webpack中，css中打包背景图，路径报错

    css-loader: //打包样式中背景图 { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[ ...

  6. 【BZOJ3362-3365】USACO水题四连A

    [BZOJ3362][Usaco2004 Feb]Navigation Nightmare 导航噩梦 Description     农夫约翰有N(2≤N≤40000)个农场,标号1到N,M(2≤M≤ ...

  7. 最小圆覆盖（随机增量法&模拟退火法）

    http://acm.hdu.edu.cn/showproblem.php?pid=3007 相关题型连接: http://acm.hdu.edu.cn/showproblem.php?pid=393 ...

  8. mysql查看线程详解（转载）

    如果有 SUPER 权限,则可以看到全部的线程,否则,只能看到自己发起的线程(这是指,当前对应的 MySQL 帐户运行的线程). mysql> show processlist; +—–+——— ...

  9. Yii 获取url 的一些方法

    原文出处http://blog.csdn.net/iefreer/article/details/21325371 1. 获取url中的host信息: Yii::app()->request-& ...

  10. Oracle下select语句

    先看scott下自带的emp表 empno:编号  ename:名字  Job:职位  mgr:上级编号 hiredate:入职时间 sal:薪水 comm:奖金 deptno:部门编号 部门表dep ...