zoukankan      html  css  js  c++  java
  • 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事件来更新对应对象的值。

  • 相关阅读:
    bzoj 3924
    bzoj 1095
    luogu 4886
    bzoj 2152
    CF960G
    bzoj 3561
    bzoj 4176
    bzoj 4407
    bzoj 3309
    luogu 4608
  • 原文地址:https://www.cnblogs.com/yg_zhang/p/6132663.html
Copyright © 2011-2022 走看看