V-MODEL指令实现方法
Posted 自由港
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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事件来更新对应对象的值。
以上是关于V-MODEL指令实现方法的主要内容，如果未能解决你的问题，请参考以下文章
横冲直撞vue(第四篇)：v-model指令系统总结指令系统示例轮播图实现指令系统示例跑马灯效果实现在vue中使用样式的方式