DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> vue.js指令v-model實現方法
vue.js指令v-model實現方法
編輯:關於JavaScript     

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved