<!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>

  <style>

    h3{

      color: rgb(75, 230, 14);

      font-weight: normal;

      font-size: 20px;

    }

  </style>

</head>

<body>

  <div id="app">

    <input type="text" style="width:100%;" v-model="msg">

    <h3>{{ msg }}</h3>

    <input type="text" style="width:100%;" v-model="msg1">

    <h3>{{ msg1 }}</h3>

    <input type="button" value="点击改变data的数据" @click="add">

    <!-- 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   -->

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        msg: '',

        msg1:'这里显示的是data里面的数据'

      },

      methods: {

        //注意 这里的函数想取得data的数据 前面必须带上this

        add() {

          this.msg1='这里显示的已经修改过的数据'

        }

      }

    });

  </script>

</body>

</html>

Vue 双向数据绑定v-model的更多相关文章

  1. Vue双向数据绑定原理分析（转）

    add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...

  2. vue双向数据绑定最最最最最简单直观的例子

    vue双向数据绑定最最最最最简单直观的例子 一.总结 一句话总结:双向绑定既不仅model可以影响view的数据,view也可以影响model的数据 view model 数据 1.vue双向数据绑定 ...

  3. vue 双向数据绑定的实现学习（一）

    前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...

  4. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  5. vue 双向数据绑定的实现学习（二）- 监听器的实现

    废话:上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和  ...

  6. vue双向数据绑定的简单实现

    vue双向数据绑定的简单实现 参考教程:链接 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. angular和vue双向数据绑定

    angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...

  8. 详解 vue 双向数据绑定的原理，并实现一组双向数据绑定

    1:vue 双向数据绑定的原理: Object.defineProperty是ES5新增的一个API,其作用是给对象的属性增加更多的控制Object.defineProperty(obj, prop, ...

  9. Vue 双向数据绑定、事件介绍以及ref获取dom节点

    vue是一个MVVM的框架 M model V view MVVM  model改变会影响视图view,view改变会影响model 双向数据绑定必须在表单里面使用 //我发现在谷歌浏览器翻译后的网页 ...

  10. vue 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点

    <template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...

随机推荐

  1. 洛谷 P1266 速度限制 最短路+SPFA算法

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 题面 题目链接 P1266 速度限制 题目描述 在这个繁忙的社会中,我们往往不 ...

  2. C++程序设计教材目录思维导图(增C++Primer)

    正在做C++思维导图,大工程,比较艰苦. 先做了三个C++教材目录的思维导图.C++教材不等于C++,这个容易些.看思维导图,整理所学知识,这个可以会. 给出三张图,对应三种教材: 谭浩强. C++程 ...

  3. 总结 ESP8266 RTOS 开发环境搭建

    总结 ESP8266 RTOS 开发环境搭建 仔细看官方文档. 必须一步一步操作. 不要想当然,以为 make 就可以. 忽略编译警告,除非是错误. 工具链必须使用官方提供的. 多看看 Issues ...

  4. python 自定义检测缺失值的方法

  5. JavaScript--轮播图_带计时器

    轮播图效果: 实现的功能: 1.鼠标移入,左右按钮显示 2.右下叫小圆点鼠标移入,进入下一张图 3.左右按钮点击,右下小圆点页跟随变更 4.自动开启计时器,鼠标移入右下叫小圆点区,计时器停止,鼠标移出 ...

  6. 在linux里如何建立一个快捷方式，连接到另一个目录

    用软链接 用法:ln -s 源目录 目标快捷方式, 比如你要在/etc下面建立一个叫LXBC553的快捷方式,指向/home/LXBC,那就是 ln -s /home/LXBC   /etc/LXBC ...

  7. 17个你必须牢记的Win10快捷键

    电脑初学者掌握了盲打技术,可以提高录入速度:游戏玩家掌握了快捷键,可以在瞬息百变的对战中提高生存的机会:而Windows玩家掌握了快捷键,不但可以提高电脑操作速度,更能享受到初级玩家望着你那仰慕的眼神 ...

  8. poj1637&&hdu1956 混合欧拉回图判断

    欧拉路:经过所有路有且仅有1次,可以路过所有的点. 无向图:  图连通,所有点都是偶数度,或者只有两个点是奇数度.当所有点是偶数度时欧拉路起点可以是任意点:当有两个奇数度点时起点必须是奇数度点. 有向 ...

  9. ef core 随记

    EntityTypeConfiguration internal class OrderEntityTypeConfiguration : IEntityTypeConfiguration<Or ...

  10. 基于Tablestore Tunnel的数据复制实战

    前言 数据复制主要指通过互联的网络在多台机器上保存相同数据的副本,通过数据复制方案,人们通常希望达到以下目的:1)使数据在地理位置上更接近用户,进而降低访问延迟:2)当部分组件出现故障时,系统依旧可以 ...