首页 > 代码库 > V-MODEL指令实现方法

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

V-MODEL指令实现方法