vue.js指令v-model实现方法
自由港 人气:0V-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事件来更新对应对象的值。
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
加载全部内容