<!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. 我从HTML的meta中学到了什么

    meta meta中有这样几个常用属性:http-equiv,name,content,包括html5新增的charset. 注意:content属性用来存储meta信息的内容,所有的主流浏览器都支持 ...

  2. C++之自定义key类型,重载操作符

    #include <map>#include <string>using namespace std;class MyString{ public:MyString(){m_s ...

  3. 【水滴石穿】react-native忽略黄色提醒

    方法一 import { YellowBox } from 'react-native'; YellowBox.ignoreWarnings(['Remote debugger']); // 忽略黄色 ...

  4. php表单和缩略图处理类是什么样呢

    <?php//封装一个表单验证类//中文验证.邮箱验证.电话号码.手机.QQ.身份证.(由字母.数字.下划线组成,不能以数字开头)header('content-type:text/html;c ...

  5. JavaScript--函数表达式与函数声明的区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. $.extend用法详解(一)

    jQuery.extend( target [, object1 ] [, objectN ] ) 在这里target是Object,它有两个作用: 1. 如果后面没有对应的object1及objec ...

  7. laravel之文件上传

    laravel框架中的文件上传我们应该如何实现此功能呢? 之前也是没有使用过laravel的文件上传功能,后来在网上找到一些教程,五花八门.让我看起来有点头疼. 有时候找到测试浪费好长时间最后还是出不 ...

  8. 用五种不同的布局方式实现“左右300px中间自适应”的效果

    float浮动 <section class="layout float"> <style media="screen"> .layou ...

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

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

  10. git 403

    MacBook-Pro:~ easy$ git pull fatal: unable to access 'https://git.xx.com:40443/source/projectName/': ...