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事件來更新對應對象的值。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM