<!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. JSP Web第六章整理复习 JavaBean技术

    P183 什么是JavaBean,JavaBean有哪些特点? javabean是一种特殊的java类 特点:属性private,方法public P184 JavaBean封装数据,例6-1,6-2 ...

  2. Leetcode4.Median of Two Sorted Arrays两个排序数组的中位数

    给定两个大小为 m 和 n 的有序数组 nums1 和 nums2 . 请找出这两个有序数组的中位数.要求算法的时间复杂度为 O(log (m+n)) . 你可以假设 nums1 和 nums2 不同 ...

  3. 大合集 | 9 场 Dubbo Meetup 回顾视频和PPT下载

    2018年2月16日,Dubbo 加入 Apache 基金会孵化器,在随后的那个夏天,我们开始在全国(北京.上海.深圳.成都.杭州)和社区的用户们见面.认识.交个朋友,将社区的最新动态.Dubbo 的 ...

  4. Mac上代码开启dump的core文件生成方案

    #ifdef Q_OS_MAC struct rlimit rl; getrlimit(RLIMIT_NOFILE,&rl); rl.rlim_cur = qMin((rlim_t)OPEN_ ...

  5. HZOI20190714 T3建造游乐场

    先放作者的正解: 先说g吧,有i个点的话,在其中i-1个点中有$C_{i-1}^{2}$种边,每个边有选和不选两种情况.如果度不是偶数呢?用剩下那个点给他连上呗.如果剩下那个点度数不是偶数呢?这是不可 ...

  6. 自学FPAG笔记之 " top_down “

    top_town设计:在FPGA中top_down(自顶向上)是十分重要的一种编程方法,优点:使用top_down方法去写代码会使得程序看起来十分简洁,缺点:top_down写的文件会特别多. 例子: ...

  7. LeetCode136 Single Number, LeetCode137 Single Number II, LeetCode260 Single Number III

    136. Single Number Given an array of integers, every element appears twice except for one. Find that ...

  8. 【怪物】KMP畸形变种——扩展KMP

    问题 参考51nod1304这道题: 很显然我们要求的是S的每个后缀与S的最长公共前缀的长度之和. 暴力 假设我们把next[i]表示为第i个后缀与S的最长公共前缀的长度. 现在我们想了:这个next ...

  9. js的下拉刷新和上拉加载，基于iScroll v4.2.5

    html部分 <div id="wrapper" style="height: 100%"> <div id="scroller&q ...

  10. JavaScript--微博发布效果

    效果图: 实现思路:  当发布按钮被点击时,又会分为三种情况 1.如果输入的内容为空,弹出提示:不能发布空微博 2.如果输入的文字超过120,弹出提示,微博内容不能超过120 3.正常发布微博到列表里 ...