码迷,mamicode.com
首页 > 其他好文 > 详细

V-MODEL指令实现方法

时间:2016-12-05 09:55:30      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:rip   encoding   script   text   order   set   page   get   back   

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指令实现方法

标签:rip   encoding   script   text   order   set   page   get   back   

原文地址:http://www.cnblogs.com/yg_zhang/p/6132663.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!