黑马vue---14、v-model双向绑定
黑马vue---14、v-model双向绑定
一、总结
一句话总结：
1、v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定
2、v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定
1、v-model的使用限制？
v-model 只能运用在 表单元素中：input(radio, text, address, email....) select checkbox textarea
2、v-model使用实例？
input type="text" style="width:100%;" v-model="msg"
二、v-model双向绑定
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<h4>{{ msg }}</h4> <!-- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定 -->
<!-- <input type="text" v-bind:value="msg" style="width:100%;"> --> <!-- 使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 -->
<!-- 注意： v-model 只能运用在 表单元素中 -->
<!-- input(radio, text, address, email....) select checkbox textarea -->
<input type="text" style="width:100%;" v-model="msg">
</div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！'
},
methods: {
}
});
</script>
</body> </html>
黑马vue---14、v-model双向绑定的更多相关文章
- vue中的数据双向绑定
学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...
- vue 自定义组件 v-model双向绑定、 父子组件同步通信【转】
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- vue 自定义组件 v-model双向绑定、 父子组件同步通信
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- Vue - 如何实现一个双向绑定
JS - 如何实现一个类似 vue 的双向绑定 Github JS 实现代码 先来看一张图: 这张图我做个简要的描述: 首先创建一个实例对象,分别触发了 compile 解析指令 和 observe ...
- vue 结合localStorage 来双向绑定数据
结合localStorage 来双向绑定数据(超级神奇) localStorage.js: const STORAGE_KEY = 'todos_vuejs' export default { fet ...
- Vue父子组件数据双向绑定，子组件可修改props
第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...
- vue中v-model 数据双向绑定
表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...
- Vue.js 3.x 双向绑定原理
什么是双向绑定? 废话不多说,我们先来看一个 v-model 基本的示例: <input type="text" v-model="search"> ...
- 利用设置新数据存储结构解决vue中折叠面板双向绑定index引起的问题
问题背景是,在进行机器性能可视化的前端开发时,使用折叠面板将不同机器的性能图表画到不同的折叠面板上去.而机器的选择利用select下拉选项来筛选. 由于在折叠面板中,通过 如下v-model双向绑定了 ...
- vue model双向绑定
view <div id='demo' class="container"> <input type="text" v-model='name ...
随机推荐
- 使用原生node.js搭建HTTP服务器，支持MP4视频、图片传输，支持下载rar文件
前言 如何安装node.js,如何搭建一个简易的http服务器我这里就不再赘述了,不懂的同学可以先去学习一下.当然了,我写的也就属于简易版的增强版,大家有什么高见的欢迎提出,然后进入正题. 目录结构 ...
- vue移动端立项
步骤一:使用vue-cli模板创建新项目:vue init webpack ‘vue-test’ 点击查看 步骤二:引入SCSS npm install sass-loader -D npm ins ...
- JVM学习笔记(一):Java虚拟机和虚拟机内存区域
为什么Java程序需要运行在虚拟机上 因为Java在设计之初的跨平台特性,我们知道Java程序是运行在Java虚拟机上的.如果你要问为什么Java程序要运行在虚拟机上,我可以反问你几个问题. 为什么买 ...
- kbmMW均衡负载与容灾(1)
kbmMW为均衡负载与容灾提供了很好的机制,支持多种实现方式,现在看看最简单的一种,客户端控制的容灾和简单的负载均衡. 现在,我们将kbmMWServer部署到不同的服务器,或者在同一服务器部署多份实 ...
- 原创博客>>>解决粘包问题的方法
目录 原创博客>>>解决粘包问题的方法 原创博客>>>解决粘包问题的方法 服务端: import socket import struct service=sock ...
- 怎么提高U盘传输文件的性能？
U盘使用时间久了,其传输复制文件速度就可能会变得有些慢.出现这个问题的原因有很多,除了U盘本身的问题外,也可能会有电脑设置方面的因素在影响.好系统下面就来告诉大家解决U盘传输复制文件速度慢的几个小技巧 ...
- vim 绑定到 source insight 快捷键
1. optioons -> custom commands 2. 选择然后写入run命令: "D:\Program Files (x86)\Vim\vim74\gvim.exe&qu ...
- （九）全志平台Tina系统量产前adb shell设密码的方法
全志平台Tina系统量产前adb shell设密码的方法[适用范围] 全志平台Tina系统 [问题现象] 通常产品量产后都想要以安全方式封闭adb shell,不允许用户或其他开发者使用,因此需要以安 ...
- mysql数据库：mysql增删改、单表、多表及子查询
一.数据增删改 二.单表查询 三.正表达式匹配 四.多表查询 五.子查询 一..数据增删改 增加 insert [into] 表名[(可选字段名)] values(一堆值1),( ...
- 第11章 Spring Boot使用Actuator
在生产环境中,需要实时或定期监控服务的可用性,spring-Boot的Actuator 功能提供了很多监控所需的接口. Actuator是Spring Boot提供的对应用系统的自省和监控的集成功能, ...