黑马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. vue-loading图

    父组件给子组件src地址: columns(){ return [ {'title': '图片', 'key': 'img', render(h, {row}){ return h(LoadingIm ...

  2. go语言中获取变量类型的三种方法

    package main import ( "fmt" "reflect" ) func main() { var num float64 = 3.14 // ...

  3. Invalid prop: custom validator check failed for prop "pagerCount"

    在element分页中使用pager-count报错: vue.esm.js?c5de:628 [Vue warn]: Invalid prop: custom validator check fai ...

  4. Python中GUI库PyQt5的安装和配置

    在使用Tkinter开发GUI程序时,发现相关文档比较少,开发起来太累.经过综合比较,决定使用PyQt这个库.下面是简单的安装步骤. 1.安装 PyQt5 : pip install PyQt5 -i ...

  5. Shell脚本——for，while，until循环

    1.for循环: 语句格式: for i in 循环判断 do 循环体 done 举例:九九乘法表(for循环版本) #!/bin/bash # Author: Sean Martin # Blog: ...

  6. QTP（10）

    一.VBS语言基础 1.运算符和表达式 (1)运算符 (2)表达式 a.数学表达式:由算术运算符连接,计算结果为数字 b.字符串表达式:由字符串连接符连接,计算结果为字符串 c.条件表达式:由关系运算 ...

  7. 从二叉查找树到平衡树：avl, 2-3树，左倾红黑树（含实现代码），传统红黑树

    参考:自平衡二叉查找树 ,红黑树, 算法:理解红黑树 (英文pdf:红黑树) 目录 自平衡二叉树介绍 avl树 2-3树 LLRBT(Left-leaning red-black tree左倾红黑树 ...

  8. linux 下 svn 重新定位 url

    linux下重新定位SVN URL方法:   如果更换了SVN服务器,就需要重新定位,指向新的SVN URL. 重新定位命令:svn switch --relocate 原svn地址 新svn地址   ...

  9. Java-DateHandler工具类

    import java.util.*; import java.text.*; public class DateHandler { public DateHandler() { } public s ...

  10. [React] Always useMemo your context value

    Have a similar post about Reac.memo. This blog is the take away from this post. To understand why to ...