V-MODEL指令实现方法

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

时间: 2024-09-28 16:29:54

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

使用jQuery异步传递含复杂属性及集合属性的Model到控制器方法

Student类有集合属性Courses,如何把Student连同集合属性Courses传递给控制器方法? public class Student     {         public string StudentName { get; set; }         public IList<Course> Courses { get; set; }     } public class Course     {         public string CourseName { ge

controller 和 指令 通讯方法

在 angular 中我们经常会使用多个 controller 和 指令 他们拥有各自的 $scope , 这就产生了跨$scope调用的问题. 有几种常见的方法来可以使用. 方法一 : 指令 require <div directive1="xx"> <div directive2></div> </div> directive("directive1", [function () { return { restri

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

我们平时使用XSHELL.SecureCRT.putty等ssh连接工具连接到远程主机,每次输入指令都是在单一会话窗口,如果有很多台会话,需要同时输入同样的指令,我们就不用一一输入,浪费时间和精力.可以发掘更方便的方法,下面就介绍一下Xshell同时向多个会话发送指令的设置方法. 使用版本为:Xshell 4.0   具体步骤如下: 1.打开2个会话 2.选择菜单栏:查看――撰写栏,勾选前面的方框选中. 3.勾选后,在Xshell窗口的最下方,出现对话框,在此输入命令,可以选择到当前的会话,也可

使用jQuery异步传递Model到控制器方法,并异步返回错误信息

需要通过jquery传递到控制器方法的Model为: public class Person { public string Name { get; set; } public int Age { get; set; } } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-

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

horizon使用的是backbone框架,但是我们的后台api都是只接收post请求,请求的路径为/api/,根据backbone的官档解释: backbone的model.save方法会判断当前的model对象是否存在存在服务器中,如果存在服务器中,则调用"update" (HTTP PUT), 如果不存在,则调用"create" (HTTP POST), 判断的依据即为当前的model的属性'id'是否存在. 举例如下: var UpdateAgentV =

结构化开发方法v.s.面向对象开发方法

关于结构化和面向对象的程序设计方法的概念对比的讨论已经不是一个很新颖的话题,然而对于刚开始接触了解软件工程开发的新手,了解学习其不同的开发特点,参与其利弊的讨论,对于新的更好的编程范式的产生具有积极意义.而在在本文中,我们从该面向对象的程序和结构化程序的特征讨论区分. 结构化编程 Structured programming can be viewed as the pulling together, or synthesization of such ideas as program modu

tp5 中 model 的查询方法

实例化模型后调用查询方法,可以写任何想要的查询(推荐) public function select(){ $user = model('User'); $data = $user -> where('status',1) ->limit(10) ->order('id','desc') ->select(); dump($data); // 模型的all方法或者select方法返回的是一个包含模型对象的二维数组或者数据集对象 } 获取单个数据[get()和find()] publ

django model 插入数据方法

需要插入的数据表结构如下: class UserInfo(models.Model): user_id =models.AutoField(primary_key=True) user_name=models.CharField(max_length=20,unique=True) depart=models.ForeignKey(DepartmentInfo) role=models.ManyToManyField(Role) *注:从上述类中可以看出UserInfo除了一般的表项外,还有有一

django model form 保存方法 django-rest-framework save 修改某一项值 方法

django Model Form django-rest-framework save 方法 修改某个数据的值 原文地址:https://www.cnblogs.com/zhaoyingjie/p/9235782.html

Dockerfile的书写规则及指令使用方法

Dockfile是一种被Docker程序解释的脚本,Dockerfile由一条一条的指令组成,每条指令对应Linux下面的一条命令.Docker程序将读取Dockerfile,根据指令生成定制的image.有了Dockerfile,当我们需要定制自己额外的需求时,只需在Dockerfile上添加或者修改指令,重新生成image即可,省去了敲命令的麻烦. Dockerfile的指令是忽略大小写的,建议使用大写,使用 # 作为注释,每一行只支持一条指令,每条指令可以携带多个参数. Dockerfil