Vue学习 双向数据绑定与v-model指令用法
2020-04-04 07:10
851 查看
什么是双向数据绑定
1.当数据发生变化的时候,视图也就发生变化
2.当视图发生变化的时候,数据也会跟着同步变化
双向数据使用的场景:
Vue通过v-model指令来实现数据双向绑定
限制 在input select textarea 标签 component(组件)中使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div>{{msg}}</div> <div> <input type="text" v-model='msg'> //把msg赋给v-model </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 双向数据绑定 1、从页面到数据 2、从数据到页面 */ var vm = new Vue({ el: '#app', data: { msg: 'Hello Vue' } }); </script> </body> </html>
效果:
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- vue.js使用v-model指令实现的数据双向绑定功能示例
- 5-Vue指令之双向数据绑定 V-model
- Vue.js第一天学习笔记(数据的双向绑定、常用指令)
- Vue双向数据绑定:v-model指令
- vue学习五之v-model 数据双向绑定
- Vue.js第一天学习笔记(数据的双向绑定、常用指令)
- 05、Vue学习——双向数据绑定
- vue 是如何实现视图与viewmodel的双向绑定的?为什么数据一变化,视图就会立即更新,视图产生用户操作,viewmodel就能马上得知
- vue学习第三天(数据双向绑定,属性绑定设置css和style)
- vue教程1-01 v-model 一般表单元素(input) 双向数据绑定
- Vue语法、指令、事件和表单的双向数据绑定
- 关于vue2.2.0创建自定义组件v-model双向绑定数据
- vue学习相关知识体系及数据双向绑定的理解
- Vue源码学习(一)———数据双向绑定 Observer
- vue.js v-model数据双向绑定实例
- VUE指令-数据绑定v-model
- vue 数据双向绑定 v-model
- Vue 2.0学习笔记:实现组件数据的双向绑定
- 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定
- Vue 双向数据绑定 V-model 通常配合input 使用