详解Vue.js之视图和数据的双向绑定(v-model)
程序员文章站
2022-04-29 12:15:07
1、使用v-model指令,使得视图和数据实现双向绑定。v-model主要用在表单的input输入框,完成视图和数据的双向绑定。
2、javascript代码...
1、使用v-model指令,使得视图和数据实现双向绑定。v-model主要用在表单的input输入框,完成视图和数据的双向绑定。
2、javascript代码
<script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"> window.onload = function() { vm = new vue({ el: '#app', data: { message: 'hello world', } }); } </script>
3、html的页面代码
<div id="app" class="container"> <input type="text" v-model='message'/> <input type="text" v-model='message'/> <br /> {{message}} </div>
4、完整的代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../css/bootstrap.min.css" rel="external nofollow" /> <style type="text/css"> .container{ margin-top: 20px; } </style> <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> $().ready(function() { var vm = new vue({ el: '#app', data: { message: "hello world ! " } }); }); </script> </head> <body> <div id="app" class="container"> <input type="text" v-model='message'/> <input type="text" v-model='message'/> <br /> {{message}} </div> </body> </html>
5、效果演示
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: vue-router 组件复用问题详解
下一篇: 清除3389远程桌面连接记录的批处理
推荐阅读
-
vue.js数据绑定的方法(单向、双向和一次性绑定)
-
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
-
详解vue.js之绑定class和style的示例代码
-
vue.js使用v-model指令实现的数据双向绑定功能示例
-
详解Vue.js之视图和数据的双向绑定(v-model)
-
详解vue中v-model和v-bind绑定数据的异同
-
vue.js自定义组件实现v-model双向数据绑定的示例代码
-
vue.js使用v-model指令实现的数据双向绑定功能示例
-
vue.js数据绑定的方法(单向、双向和一次性绑定)
-
详解vue.js之绑定class和style的示例代码