vue中v-model的数据双向绑定(重要)
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <div id="app">
- <input type="text" v-model="msg">
- <!--v-model一般都是数据属性或者方法里面声明的****-->
- <p>{{ msg }}</p>
- <textarea placeholder="" v-model="msg"></textarea>
- <!--只要绑定了v-model msg都会同时改变-->
- <!--单个复选框-->
- <input type="checkbox" id="checkbox" v-model="checked">
- <label for="checkbox">{{ checked }}</label>
- <!--多个复选框,绑定到同一个数组-->
- <div id='example-3'>
- <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
- <label for="jack">Jack</label>
- <input type="checkbox" id="john" value="John" v-model="checkedNames">
- <label for="john">John</label>
- <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
- <label for="mike">Mike</label>
- <br>
- <span>Checked names: {{ checkedNames }}</span>
- <br>
- <!--for 和 id 一样的值作用就是 点击页面上的用户名就会自动聚集 跟点击输入框聚焦的效果一样-->
- <label for="username">用户名:</label>
- <!--懒监听-->
- <input type="text" v-model.lazy="msg2" id="username">
- <p>{{msg2}}</p>
- <br>
- <!--单选框 绑定的是父级标签select不是option 所以select额度跟 span里的selected有关联-->
- <div id="example-5">
- <select v-model="selected">
- <option disabled value="">请选择</option>
- <option>A</option>
- <option>B</option>
- <option>C</option>
- </select>
- <span>Selected: {{ selected }}</span>
- </div>
- <!--多选绑定数组-->
- <div id="example-6">
- <select v-model="selected2" multiple style="width: 50px;">
- <option>A</option>
- <option>B</option>
- <option>C</option>
- </select>
- <span>Selected: {{ selected2 }}</span>
- </div>
- <br>
- <!--清除前后空格-->
- <input v-model.trim="msg3">
- <p>{{msg3}}</p>
- </div>
- </div>
- <script src="vue.js"></script>
- <script>
- // v-model 只能应用在 input textarea select标签中
- //双向数据绑定:之前的操作都是数据到view的过程(return 返回的数据给回div里的msg)
- //先有数据到view,更改view,再有反向的
- //一开始return 里面的msg 在加载页面的时候就已经放在了div中显示msg的位置了,有了数据到view的过程
- //更改view就是在input输入框里改输入框的变化,就是修改msg,
- //这时候data中的msg会随着变化, 进而导致<p>里面的msg跟着改变
- new Vue({
- el: "#app",
- data() {
- return {
- msg: "alex",
- msg2:"wusir",
- msg3:"",
- checked: false,
- checkedNames: [],
- selected: "",
- selected2:[],
- }//怎么显示到input的输入框?以前是用过value属性,在vue里value属性会被忽略掉
- }
- })
- </script>
- </body>
- </html>
vue中v-model的数据双向绑定(重要)的更多相关文章
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
- vue中v-model 数据双向绑定
表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...
- Vue之九数据劫持实现MVVM的数据双向绑定
vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的. 如果不熟悉defineProperty,猛 ...
- 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()
Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...
- 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
- Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
- 原生js实现 vue的数据双向绑定
原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...
- AngularJS中数据双向绑定(two-way data-binding)
1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...
- 如何在原生微信小程序中实现数据双向绑定
官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...
随机推荐
- js 动态生成button 并设置click事件
<div id="MyDiv"></div> <script> function AddButton() { var MyDiv =docume ...
- 一台虚拟机配置nginx反向代理+3个apache虚拟主机
三个虚拟主机通过一张网卡添加三个IP来实现 一.安装nginx 1.解决依赖 [root@xuegod1 ~]# yum groupinstall "Development Tools&qu ...
- 注册.NET Framework 到IIS服务器
一.注册.NET 4.0 32位的Windows:--------------------------------------------------------------------------- ...
- Android指纹识别
原文:Android指纹识别 上一篇讲了通过FingerprintManager验证手机是否支持指纹识别,以及是否录入了指纹,这里进行指纹的验证. //获取FingerprintManager实例 F ...
- Django 创建超级管理员失败
django.db.utils.DataError: (1406, "Data too long for column 'gender' at row 1") 解决方案 在执行mi ...
- Win8Metro(C#)数字图像处理--2.30直方图均衡化
原文:Win8Metro(C#)数字图像处理--2.30直方图均衡化 [函数名称] 直方图均衡化函数HistogramEqualProcess(WriteableBitmap src) [算法说明] ...
- Java HashMap实现原理 源码剖析
HashMap是基于哈希表的Map接口实现,提供了所有可选的映射操作,并允许使用null值和null建,不同步且不保证映射顺序.下面记录一下研究HashMap实现原理. HashMap内部存储 在Ha ...
- Flot Reference flot参考文档
Consider a call to the plot function:下面是对绘图函数plot的调用: var plot = $.plot(placeholder, data, options) ...
- 关于C中可变长参数
前言 可变长参数指函数的参数个数在调用时才能确定的函数参数.基本上各种语言都支持可变长参数,在特定情形下,可变长参数使用起来非常方便.c语言中函数可变长参数使用“...”来表示,同时可变长参数只能位于 ...
- 非常简单的利用CreateProcess注入DLL的方法
TCHAR szDll[] = TEXT("d:\\test.dll"); STARTUPINFO si = {0}; PROCESS_INFORMATION pi = {0}; ...