//html
<div id="app">
    <input type="text"v-model="msg" style="width:100%">
</div> //script
<script>
  var vm = new Vue({
    el:'app',
    data:{
      msg:'点击一下'
    }
  })
</script>

说明:

v-bind只能实现数据的单向绑定 从model 自动绑定到 view中,无法实现数据的双向绑定

v-model指令可以实现 表单元素和model中数据的双向绑定 v-model只能运用在表单元素中,即除了能够实现数据从model渲染到到view,也能实现从view中道model中去

效果:

页面渲染完成之后,会有一个点击一下 和一个input,input的内容是点击一下   修改input中的值,页面上的点击一下 会随着input内容的变化而变化

vue学习(七) v-model 双向数据绑定的更多相关文章

  1. day 85 Vue学习七之vue-cookie

      Vue学习七之vue-cookie   通过vue如何操作cookie呢 参考链接:https://www.jianshu.com/p/535b53989b39 第一步:安装vue-cookies ...

  2. Vue学习笔记【7】——Vue指令之v-model和双向数据绑定

    v-model是唯一可以实现双向数据绑定的vue指令 单向数据绑定:修改内存中的数据,页面上同步更改.v-bind <!-- v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法 ...

  3. Vue指令之`v-model`和`双向数据绑定

     v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法实现数据的双向绑定 <input type="text" v-bind:value="msg& ...

  4. vue学习笔记(二)- 数据绑定、列表渲染、条件判断

    vue的数据绑定和列表渲染的造轮子 GitHub:八至 作者:狐狸家的鱼 双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面 页面->数据 适用:input.select. ...

  5. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...

  6. 怎样在 Vue 中使用 v-model 实现双向数据绑定?

    1. 所谓 双向数据绑定, 可以理解为: 修改 A , B 会跟着被修改, 修改 B , A 会跟着被修改. 常用在需要 进行用户输入的地方, 比如 这些 html 标签:  input.select ...

  7. vue.js--基础 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中,键盘事件

    <template> <div id="app"> <h1>{{ msg }}</h1> <input type=" ...

  8. vue.js--基础 事件结合双向数据绑定实现todolist,增加和删除功能

    原理很简单,写一个input框,定义一个空的list,当在input中增加数据时,就往list中添加数据,然后在循环这个list的数据,删除数据就是调用list中的splice <templat ...

  9. vue学习七之Axios

    JQuery时代,我们使用ajax向后台提交数据请求,Vue时代,Axios提供了前端对后台数据请求的各种方式. 什么是Axios Axios是基于Promise的Http客户端,可以在浏览器和nod ...

随机推荐

  1. nova api报错network问题

    安装openstack Rocky版本的时候,在未安装网络服务前,创建虚拟机,报以下错误 [root@controller2 nova]# openstack server create --flav ...

  2. ajax前后端交互原理(5)

    5.ajax简介 5.1.什么是ajax Asynchronous JavaScript and XML ,异步的javascript和XML 5.2.使用ajax有什么用 数据交互,可以从服务器获取 ...

  3. 几个常见CSS错误和解决办法

    1.IE6下,当float存在时,margin双倍的问题 解决方法:加display:inline; 例: #content {    float: left;     width: 500px;   ...

  4. Spring系列.Bean简介

    Bean属性配置 Spring在读取配置文件中bean的metadata后会构造一个个BeanDefination对象.后面Spring会根据这些BeanDefinition创建对象.在配置一个bea ...

  5. day08获取图片

    wxml: <!--pages/publish/publish.wxml--> <text>pages/publish/publish.wxml</text> &l ...

  6. directive 实例讲解

    http://my.oschina.net/ilivebox/blog/289670 gulp-nodemon http://www.zhihu.com/question/32123388?sort= ...

  7. Poj 3613 Cow Relays (图论)

    Poj 3613 Cow Relays (图论) 题目大意 给出一个无向图,T条边,给出N,S,E,求S到E经过N条边的最短路径长度 理论上讲就是给了有n条边限制的最短路 solution 最一开始想 ...

  8. day40 线程

    目录 一.开启线程的两种方式 二.用进程和线程分别实现tcp 三.线程对象实现join方法 四.同一个进程下的多个线程数据是共享的 五.线程对象属性及其他方法 六.守护线程 七.线程互斥锁 八.GIL ...

  9. day23 作业

    day23 作业 目录 day23 作业 1.把登录与注册的密码都换成密文形式 2.文件完整性校验(考虑大文件) 3.注册功能改用json实现 4.项目的配置文件采用configparser进行解析 ...

  10. 外部应用复制 表格 到word中 设置表格自适应

    word 批量设置表格宽度自适应 描述 : 我们经常从 外部 如 excel,html 等其他文件 中复制的表格到word 文档 经常会出现在 word 中显示不全的问题 主要是源格式的表格 宽度比 ...