Vue.js之视图和数据的双向绑定(v-model)
2017-03-05 13:53
891 查看
1、使用v-model指令,使得视图和数据实现双向绑定。v-model主要用在表单的input输入框,完成视图和数据的双向绑定。
2、JavaScript代码
3、Html的页面代码
4、完整的代码
5、效果演示
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" />
<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.js使用v-model指令实现的数据双向绑定功能示例
- vue.js v-model数据双向绑定实例
- Vue.js实现双向数据绑定(表单自动赋值、表单自动取值)
- vue.js利用defineProperty实现数据的双向绑定
- Vue.js学习笔记:v-model双向绑定
- Vue.js每天必学之数据双向绑定
- Vue.js双向数据绑定模板渲染
- 非常简单的js双向数据绑定框架(三):js model黑科技
- 为什么 vue.js存在某些情况下 v-model绑定数据不实时更新呢?
- vue div contenteditable属性,模拟v-model双向数据绑定功能
- Vue.js学习 Item4 -- 数据双向绑定
- vue 数据双向绑定 v-model
- Vue.js学习 Item4 -- 数据双向绑定
- angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制
- Vue.js双向数据绑定实现
- Vue.js的组件(四)父组件与子组件的数据联系 之 双向绑定
- 详解Vue.js之视图和数据的双向绑定(v-model)
- vue.js数据绑定的方法(单向、双向和一次性绑定)
- vue.js表单数据双向绑定
- 初探Vue原理之view-model的数据动态双向绑定