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事件来更新对应对象的值。

V-MODEL指令实现方法的更多相关文章

  1. CI中的控制器中要用model中的方法,是统一写在构造器方法中,还是在每一个方法中分别写

    Q: CI中的控制器中要用model中的方法,是统一写在构造器方法中,还是在每一个方法中分别写 A: 建议统一写,CI框架会自动识别已经加载过的类,所以不用担心重复加载的问题 class C_User ...

  2. CakePHP采用model的save方法更新数据所需查询

    采用model的save方法更新数据所需查询 1. 验证时候要确认是update 或者 create,以便使用对应规则 public $validate = array( 'field_name' = ...

  3. controller 和 指令 通讯方法

    在 angular 中我们经常会使用多个 controller 和 指令 他们拥有各自的 $scope , 这就产生了跨$scope调用的问题. 有几种常见的方法来可以使用. 方法一 : 指令 req ...

  4. Xshell同时向多个会话发送指令的方法

    我们平时使用XSHELL.SecureCRT.putty等ssh连接工具连接到远程主机,每次输入指令都是在单一会话窗口,如果有很多台会话,需要同时输入同样的指令,我们就不用一一输入,浪费时间和精力.可 ...

  5. backbone Model调用save方法的时候提交方式

    horizon使用的是backbone框架,但是我们的后台api都是只接收post请求,请求的路径为/api/,根据backbone的官档解释: backbone的model.save方法会判断当前的 ...

  6. Thinkhphp5控制器调用的Model层的方法总结

    控制器器里: <?php /** * Created by PhpStorm. * User: Haima * Date: 2018/7/8 * Time: 15:58 */ namespace ...

  7. C# 使用 X.509 v.3 证书的方法。

    C# 使用 X.509 v.3 证书的方法. public static void Main()    { // The path to the certificate.        string ...

  8. SDI011 读卡器自动发送00A4选择指令 解决方法

    如标题,SDI读卡器会自动发送 004A的应用选择指令 解决方法: 是Certificate Propagation 服务 弄的, 关闭就好了

  9. Django model重写save方法及update踩坑记录

    一个非常实用的小方法 试想一下,Django中如果我们想对保存进数据库的数据做校验,有哪些实现的方法? 我们可以在view中去处理,每当view接收请求,就对提交的数据做校验,校验不通过直接返回错误, ...

  10. tp5 中 model 的查询方法

    实例化模型后调用查询方法,可以写任何想要的查询(推荐) public function select(){ $user = model('User'); $data = $user -> ) - ...

随机推荐

  1. mybatis foreach的使用

    foreach标签在批量插入数据库时非常方便,但是很容易出错,我没有注意括号的位置让我折腾了一个半小时找问题,醉醉哒,所以在这里记录一下foreach的使用. 首先,这是insert批量插入正确的代码 ...

  2. AtCoder Grand Contest 008 A

    Problem Statement Snuke has a calculator. It has a display and two buttons. Initially, the display s ...

  3. 服务器断电保护神v2.2

    下载链接: https://pan.baidu.com/s/1bph5IFX 密码: evbn 使用说明:①每15秒检测一次,当列表内的主机PING不通时将执行关机②支持4种关机方式,理论上第一种方式 ...

  4. log4j日志配置

    #debug#日志权限配置log4j.rootLogger=info,error,stdout#控制台输出log4j.appender.stdout=org.apache.log4j.ConsoleA ...

  5. R画图中英文字体完美解决方案

    在某些时候,需要在R画图中添加中文,但是默认情况下,R对中文的支持不好. 当用R画PDF图,并且图中有中文的时候,安装并加载如下包library(showtext)然后:showtext.auto(e ...

  6. 蚁群算法简介(part 1:蚁群算法之绪论)

    群算法是Marco Dorigo在1992年提出的一种优化算法,该算法受到蚂蚁搜索食物时对路径的选择策略的启示.蚁群算法作为群体智能算法的一种利用分布式的种群搜索策略来寻找目标函数的最优解.蚁群算法与 ...

  7. 浏览器中的Javascript的简单对话框

    简单对话框是指对话框不去做设计,而直接使用默认的,如alert.confirm.prompt: <html> <head> <meta http-equiv=" ...

  8. 自己常用JS和JQ 函数

    //验证码函数 <button id="send">点击发送验证码</button> <script src="jquery.min.js& ...

  9. WCF与WebService的区别

    1.WebService:严格来说是行业标准,不是技术,使用XML扩展标记语言来表示数据(这个是夸语言和平台的关键).微软的Web服务实现称为ASP.NET Web Service.它使用Soap简单 ...

  10. HttpClient 4.5.x 工具类设计与实现

    最近,业务需要在java服务端发起http请求,需要实现"GET","POST","PUT"等基本方法.于是想以 "HttpCli ...