黑马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 ...
随机推荐
- span 如何移除点击事件
//设置点击事件不可用 $("#verificode").css("pointer-events", "none"); //倒计时完毕,点击 ...
- Ubuntu18.04安装 NVIDIA驱动
Ubuntu18.04安装 NVIDIA驱动 参考自博客:https://blog.csdn.net/jsjason1/article/details/88086904 我确定这篇文章是否很有必要,我 ...
- Android异常与性能优化相关面试问题-内存泄漏面试问题讲解
Java内存泄漏基础知识: Java的内存的分配策略 a.静态存储区:也叫方法区,主要是存放一些静态数据及全局变量等,在程序编译时就已经分配好了,并且在静态存储区中存放的变量在整个程序运行期间都存在. ...
- java线程基础巩固---构造Thread对象你也许不知道的几件事
关于Thread的构造在JDK文档中如下: 之后会把上面所有的构造都会学习到,这次主要是去研究一下图上标红的默认构造,当然大家肯定对于它都有些不屑,这有啥可学的,不new一个然后start线程不就启动 ...
- git fetch, merge, pull, push需要注意的地方
在git操作中,我们经常会用到fetch, merge, pull和push等命令,以下是一些我们需要注意的地方. 给大家准备了参考资料: 1. Whatʼs a Fast Forward Merge ...
- linux weblogic的sh文件
setDomainEnv.sh JAVA_HOME和各种jvm参数,CLASSPATH都在这里配置 #!/bin/sh # WARNING: This file is created by ...
- php类相关知识----抽象类
<?php //抽象类存在的目的是被继承,而不是用来被实现 abstract class wenwajiao { //抽象类中一定要有抽象方法,而且一定要被实现 abstract public ...
- Hadoop-No.14之文件传输的特点
文件传输特点 这是一种all-or-nothing批处理方法,所以如果文件传输过程中出现错误,则不会写入或读取任何数据.这种方法与Flume,Kafka之类的采集方法不同,后者提供一定程度的错误处理功 ...
- 微信小程序---密码输入
设计支付密码的输入框 效果如下: 源码:github地址:https://github.com/fiveTree/-_- 干货: <view class="pay"> ...
- linux中telnet后退出连接窗口
[root@a cron]# telnet www.baidu.com 80Trying 115.239.211.112...Connected to www.baidu.com. #显示conn ...