//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. Python3-socket模块-低级网络接口

    Python3中的socket模块提供了对访问套接字(socket)的接口 socket可以理解为是一个管道,通过这个管道可以使两个不同的程序通过网络进行通信,在Python中的scoket()函数可 ...

  2. JAVA集合框架 - Collection

    collection大致介绍 Collection是集合层次结构中的根接口. 集合表示一组对象.有些集合允许重复元素,有些则不允许.有些是有序的,有些是无序的. JDK没有提供此接口的任何直接实现:它 ...

  3. 痞子衡嵌入式:利用i.MXRT1xxx系列ROM提供的FlexSPI driver API可轻松IAP

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT系列ROM中的FlexSPI驱动API实现IAP. 痞子衡的技术交流群里经常有群友提问: i.MXRT中的FlexSPI驱动 ...

  4. 报错 500 - Request processing failed; nested exception is com.alibaba.dubbo.rpc.RpcException的解决放案

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/loveliness_peri/artic ...

  5. DP没入门就入土

    写在前面 记录最近刷的DP题 以及 打死都不可能想到状态设计DP系列 汇总 洛谷 P6082 [JSOI2015]salesman 树形\(\texttt{DP}\) + 优先队列 比较容易看出来这是 ...

  6. PE文件结构详解(三)

    0x01 前言 上一篇讲到了数据目录表的结构和怎找到到数据目录表(DataDirectory[16]),这篇我们我来讲讲数据目录表后面的另一个结构——区块表. 0x01 区块 区块就是PE载入器将PE ...

  7. PowerJob 的故事开始:“玩够了,才有精力写开源啊!”

    本文适合有 Java 基础知识的人群 作者:HelloGitHub-Salieri HelloGitHub 推出的<讲解开源项目>系列.经过几番的努力和沟通,终于邀请到分布式任务调度与计算 ...

  8. C#foreach原理

    本文主要记录我在学习C#中foreach遍历原理的心得体会. 对集合中的要素进行遍历是所有编码中经常涉及到的操作,因此大部分编程语言都把此过程写进了语法中,比如C#中的foreach.经常会看到下面的 ...

  9. 记一次在Grafana中使用Worldmap Panel的经历

    背景 因与工作相关,以下内容皆做了脱敏处理 主要的需求是要根据地理位置查看可视化的数据. 安装及创建 安装命令来源于官网 grafana-cli plugins install grafana-wor ...

  10. day42 io模型

    目录 一.io模型简介 二.阻塞io阻塞IO模型图.png 三.非阻塞io 四.io多路复用 五.异步io 一.io模型简介 Stevens在文章中一共比较了五种IO Model: blocking ...