1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7.  
  8. <body>
  9. <div id="app">
  10. <input type="text" v-model="msg">
  11. <!--v-model一般都是数据属性或者方法里面声明的****-->
  12. <p>{{ msg }}</p>
  13. <textarea placeholder="" v-model="msg"></textarea>
  14. <!--只要绑定了v-model msg都会同时改变-->
  15.  
  16. <!--单个复选框-->
  17. <input type="checkbox" id="checkbox" v-model="checked">
  18. <label for="checkbox">{{ checked }}</label>
  19. <!--多个复选框,绑定到同一个数组-->
  20. <div id='example-3'>
  21. <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  22. <label for="jack">Jack</label>
  23. <input type="checkbox" id="john" value="John" v-model="checkedNames">
  24. <label for="john">John</label>
  25. <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  26. <label for="mike">Mike</label>
  27.  
  28. <br>
  29. <span>Checked names: {{ checkedNames }}</span>
  30.  
  31. <br>
  32. <!--for 和 id 一样的值作用就是 点击页面上的用户名就会自动聚集 跟点击输入框聚焦的效果一样-->
  33. <label for="username">用户名:</label>
  34. <!--懒监听-->
  35. <input type="text" v-model.lazy="msg2" id="username">
  36. <p>{{msg2}}</p>
  37. <br>
  38.  
  39. <!--单选框 绑定的是父级标签select不是option 所以select额度跟 span里的selected有关联-->
  40. <div id="example-5">
  41. <select v-model="selected">
  42. <option disabled value="">请选择</option>
  43. <option>A</option>
  44. <option>B</option>
  45. <option>C</option>
  46. </select>
  47. <span>Selected: {{ selected }}</span>
  48. </div>
  49. <!--多选绑定数组-->
  50. <div id="example-6">
  51. <select v-model="selected2" multiple style="width: 50px;">
  52. <option>A</option>
  53. <option>B</option>
  54. <option>C</option>
  55. </select>
  56.  
  57. <span>Selected: {{ selected2 }}</span>
  58. </div>
  59. <br>
  60. <!--清除前后空格-->
  61. <input v-model.trim="msg3">
  62. <p>{{msg3}}</p>
  63. </div>
  64. </div>
  65.  
  66. <script src="vue.js"></script>
  67. <script>
  68. // v-model 只能应用在 input textarea select标签中
  69. //双向数据绑定:之前的操作都是数据到view的过程(return 返回的数据给回div里的msg)
  70. //先有数据到view,更改view,再有反向的
  71. //一开始return 里面的msg 在加载页面的时候就已经放在了div中显示msg的位置了,有了数据到view的过程
  72. //更改view就是在input输入框里改输入框的变化,就是修改msg,
  73. //这时候data中的msg会随着变化, 进而导致<p>里面的msg跟着改变
  74. new Vue({
  75. el: "#app",
  76. data() {
  77. return {
  78. msg: "alex",
  79. msg2:"wusir",
  80. msg3:"",
  81. checked: false,
  82. checkedNames: [],
  83. selected: "",
  84. selected2:[],
  85. }//怎么显示到input的输入框?以前是用过value属性,在vue里value属性会被忽略掉
  86. }
  87. })
  88. </script>
  89. </body>
  90. </html>

vue中v-model的数据双向绑定(重要)的更多相关文章

  1. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  2. vue中v-model 数据双向绑定

    表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...

  3. Vue之九数据劫持实现MVVM的数据双向绑定

    vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的. 如果不熟悉defineProperty,猛 ...

  4. 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  5. 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()

    Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...

  6. 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  7. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  8. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  9. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  10. 如何在原生微信小程序中实现数据双向绑定

    官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...

随机推荐

  1. js 动态生成button 并设置click事件

    <div id="MyDiv"></div> <script> function AddButton() { var MyDiv =docume ...

  2. 一台虚拟机配置nginx反向代理+3个apache虚拟主机

    三个虚拟主机通过一张网卡添加三个IP来实现 一.安装nginx 1.解决依赖 [root@xuegod1 ~]# yum groupinstall "Development Tools&qu ...

  3. 注册.NET Framework 到IIS服务器

    一.注册.NET 4.0 32位的Windows:--------------------------------------------------------------------------- ...

  4. Android指纹识别

    原文:Android指纹识别 上一篇讲了通过FingerprintManager验证手机是否支持指纹识别,以及是否录入了指纹,这里进行指纹的验证. //获取FingerprintManager实例 F ...

  5. Django 创建超级管理员失败

    django.db.utils.DataError: (1406, "Data too long for column 'gender' at row 1") 解决方案 在执行mi ...

  6. Win8Metro(C#)数字图像处理--2.30直方图均衡化

    原文:Win8Metro(C#)数字图像处理--2.30直方图均衡化 [函数名称] 直方图均衡化函数HistogramEqualProcess(WriteableBitmap src) [算法说明] ...

  7. Java HashMap实现原理 源码剖析

    HashMap是基于哈希表的Map接口实现,提供了所有可选的映射操作,并允许使用null值和null建,不同步且不保证映射顺序.下面记录一下研究HashMap实现原理. HashMap内部存储 在Ha ...

  8. Flot Reference flot参考文档

    Consider a call to the plot function:下面是对绘图函数plot的调用: var plot = $.plot(placeholder, data, options) ...

  9. 关于C中可变长参数

    前言 可变长参数指函数的参数个数在调用时才能确定的函数参数.基本上各种语言都支持可变长参数,在特定情形下,可变长参数使用起来非常方便.c语言中函数可变长参数使用“...”来表示,同时可变长参数只能位于 ...

  10. 非常简单的利用CreateProcess注入DLL的方法

    TCHAR szDll[] = TEXT("d:\\test.dll"); STARTUPINFO si = {0}; PROCESS_INFORMATION pi = {0}; ...