黑马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双向绑定的更多相关文章

  1. vue中的数据双向绑定

    学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...

  2. vue 自定义组件 v-model双向绑定、 父子组件同步通信【转】

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  3. vue 自定义组件 v-model双向绑定、 父子组件同步通信

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  4. Vue - 如何实现一个双向绑定

    JS - 如何实现一个类似 vue 的双向绑定 Github JS 实现代码 先来看一张图: 这张图我做个简要的描述: 首先创建一个实例对象,分别触发了 compile  解析指令 和 observe ...

  5. vue 结合localStorage 来双向绑定数据

    结合localStorage 来双向绑定数据(超级神奇) localStorage.js: const STORAGE_KEY = 'todos_vuejs' export default { fet ...

  6. Vue父子组件数据双向绑定，子组件可修改props

    第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...

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

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

  8. Vue.js 3.x 双向绑定原理

    什么是双向绑定? 废话不多说,我们先来看一个 v-model 基本的示例: <input type="text" v-model="search"> ...

  9. 利用设置新数据存储结构解决vue中折叠面板双向绑定index引起的问题

    问题背景是,在进行机器性能可视化的前端开发时,使用折叠面板将不同机器的性能图表画到不同的折叠面板上去.而机器的选择利用select下拉选项来筛选. 由于在折叠面板中,通过 如下v-model双向绑定了 ...

  10. vue model双向绑定

    view <div id='demo' class="container"> <input type="text" v-model='name ...

随机推荐

  1. python与pip

    python , pip 相关命令汇总 1) 在python3 下升级pip3 pip3 install --upgrade pip

  2. eval的使用

    当逻辑字符串是拼接而成的时候可以用eval来判断真假 eg:let a= "22" let b = ">" let c = "1" 用 ...

  3. ETL 工具和 BI 工具

    ETL是数据仓库中的非常重要的一环,是承前启后的必要的一步.ETL负责将分布的.异构数据源中的数据如关系数据.平面数据文件等抽取到临时中间层后进行清洗.转换.集成,最后加载到数据仓库或数据集市中,成为 ...

  4. 在已有lnmp环境的基础上安装PHP7

    Centos7.6系统 已经安装lnmp一键环境 想装个apache跑php7, apache安装在这 https://www.cnblogs.com/lz0925/p/11227063.html 要 ...

  5. 8.9.网络编程_Socket 远程调用机制

    1.网络编程 1.1.网络编程概述: 通过通信线路(有线或无线)可以把不同地理位置且相互独立的计算机连同其外部设备连接起来,组成计算机网络.在操作系统.网络管理软件及网络 通信协议的管理和协调下,可以 ...

  6. pip命令及虚拟环境的建立

    以下命令是pip命令,是帮助我们安装解决python所需要的环境包 列出已经安装的包 pip list 安装要安装的包 pip install 包名 安装特定版本 pip install django ...

  7. HashSet与HashMap源代码深度剖析

    HashSet源码分析: 先来看一下它的构造方法: 呃~~居然它的底层是用HashMap来实现的,颠覆三观,那它究竟是如何来用的呢?继续来往下跟: 对于HashSet而言是没有key->valu ...

  8. Summer training #2

    A:不管有没有负数 一顿操作之后肯定只有正数 又因为A=A-B 所以最大值是一直在减小的 所以一定有结果 B:..一开始以为求min操作数 WA了2发 直接求所有数的GCD如果所有数的GCD都不是1的 ...

  9. NoSQL数据库技术实战-第1章 NoSQL与大数据简介 NoSQL数据库的类型

    键值存储数据库临时性:如Memcached.临时性的键值数据库把数据存储在内存中,在两种情况下会造成上数据的丢失,一是断电,而是数据内容超出内存大小.这种处理的好处是非常快.永久型:如Tokyo Ty ...

  10. 不使用C库函数（Sprintf）将void* 指针转换为十六进制字符串

    #include <stdio.h> #include <stdint.h> #include <stdlib.h> void hexDump(void *ptr, ...