原文链接:http://www.jb51.net/article/99097.htm

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 :value="person.name" @input="person.name = $event.target.value">如果data里没有对应的值,即使在这里写了value也是显示不出来的。

相关文章:

  • 2018-04-27
  • 2021-09-18
  • 2022-12-23
  • 2021-10-17
  • 2021-11-23
  • 2021-06-29
  • 2021-11-21
  • 2022-12-23
猜你喜欢
  • 2021-10-28
  • 2022-01-06
  • 2018-08-28
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案