//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. Mariadb之事务隔离级别

    上一篇我们聊到了mariadb的锁,以及怎么手动加锁和解锁等等,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13196905.html:今天我们来聊一聊mar ...

  2. Python之浅谈深浅拷贝

    目录 深浅拷贝 拷贝 浅拷贝 深拷贝 深浅拷贝 拷贝 s=['tim','age'] s2=s #这里的s2列表指向与s相同的id 当s2为s的拷贝对象时,s内的可变类型变化,s2变化;s内的不可变类 ...

  3. 51单片机入门(补充)1--与C语言的交接

    我写完上一个文章,发现我写的还是不够全面,所以,这篇文章将会延续上一个文章的内容,并且再次补充新的东西,如果还有什么地方需要补充,还请各位一一指出,如果你已经学过这些东西,大可以直接跳过,假如说之后有 ...

  4. python案例远程执行命令

    ------类似于cmd的功能,client执行命令,server发命令结果发送到client -----------server.py------------------- import subpr ...

  5. Hive 报错SemanticException Error in parsing

    以下sql执行时报错SemanticException Error in parsing select clr.id,clr.customer_id,clr,contract_code,clr.cor ...

  6. 同一WpfApplication下简单的页面转换

    别人写的很不错的Dome...分享学习下 源文件地址 : http://pan.baidu.com/share/link?shareid=1698564707&uk=3912660076

  7. 赞!7000 字学习笔记,一天搞定 MySQL

    MySQL数据库简介 MySQL近两年一直稳居第二,随时有可能超过Oracle计晋升为第一名,因为MySQL的性能一直在被优化,同时安全机制也是逐渐成熟,更重要的是开源免费的. MySQL是一种关系数 ...

  8. unity position 记录

    localPosition为自身矩形中心点(Pivot)与其父节点矩形中心点(Pivot)的相对位置坐标,与自身锚点(Anchors)无关.anchoredPosition为矩形中心点(Pivot)与 ...

  9. kafka的认识、安装与配置

    认识Kafka 花费越少的精力在数据移动上,就能越专注于核心业务 --- <Kafka:The Definitive Guide> 认识 Kafka 之前,先了解一下发布与订阅消息系统:消 ...

  10. AMAP-TECH算法大赛开赛!基于车载视频图像的动态路况分析

    阿里巴巴高德地图AMAP-TECH算法大赛于7月8日开启初赛,赛题为「基于车载视频图像的动态路况分析」,活动邀请了业界权威专家担任评委,优秀选手不仅可以瓜分丰厚的奖金,领取荣誉证书,还有机会进入高德地 ...