Vue 双向数据绑定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>
<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的更多相关文章
- Vue双向数据绑定原理分析(转)
add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...
- vue双向数据绑定最最最最最简单直观的例子
vue双向数据绑定最最最最最简单直观的例子 一.总结 一句话总结:双向绑定既不仅model可以影响view的数据,view也可以影响model的数据 view model 数据 1.vue双向数据绑定 ...
- vue 双向数据绑定的实现学习(一)
前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- vue 双向数据绑定的实现学习(二)- 监听器的实现
废话:上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和 ...
- vue双向数据绑定的简单实现
vue双向数据绑定的简单实现 参考教程:链接 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- angular和vue双向数据绑定
angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...
- 详解 vue 双向数据绑定的原理,并实现一组双向数据绑定
1:vue 双向数据绑定的原理: Object.defineProperty是ES5新增的一个API,其作用是给对象的属性增加更多的控制Object.defineProperty(obj, prop, ...
- Vue 双向数据绑定、事件介绍以及ref获取dom节点
vue是一个MVVM的框架 M model V view MVVM model改变会影响视图view,view改变会影响model 双向数据绑定必须在表单里面使用 //我发现在谷歌浏览器翻译后的网页 ...
- vue 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点
<template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...
随机推荐
- [J2EE规范]RMI简单实例 标签: j2ee实例 2017-06-29 18:05 217人阅读 评论(13)
RMI是什么? RMI是指Java Remote Method Invocation,远程方法调用,RMI是Java的一组拥护开发分布式应用程序的API.RMI使用Java语言接口定义了远程对象,它集 ...
- jdbc连接数据库的步骤(转载)
http://hzy3774.iteye.com/blog/1689525 1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机), 这通过jav ...
- nodeJs koa-generator脚手架
koa-generator 脚手架 全局安装:cnpm install -g koa-generator 查看版本:koa2 --version 创建项目:koa2 project 默认的是用jade ...
- 管理神话之"我还能做大量的技术工作"
“你要知道,如果你想做好一件事,你就必须自己动手.”Clive一边咕哝着,一边走回自己的房间. Susan原本在埋头工作.她抬起头来,叹了口气.然后起身,跟着Clive穿过走廊,来到他的房间门口.她敲 ...
- 【JZOJ4890】【NOIP2016提高A组集训第14场11.12】随机游走
题目描述 YJC最近在学习图的有关知识.今天,他遇到了这么一个概念:随机游走.随机游走指每次从相邻的点中随机选一个走过去,重复这样的过程若干次.YJC很聪明,他很快就学会了怎么跑随机游走.为了检验自己 ...
- H5+ 分享到微信、朋友圈代码示例
h5+分享到微信.朋友圈代码示例 在使用分享功能的时候会莫名的分享失败,debug时发现是图片过大的问题. 图片过大时ios平台上返回错误码-8,安卓上返回错误码-3(我测试是这样) 因此如果第一次分 ...
- 《DL/T 1476-2015 电力安全工器具预防性试验规程》中的样品名称及试验项目
- GIT 公钥配置
1.下载git 2.ssh-keygen -t rsa -C "xxx@xxx.com" 3.cd ~/.ssh 4.ls 5.cat id_rsa.pub 或者C:\User\x ...
- APP UI设计趋势:为好设计而动
http://www.cocoachina.com/design/20150703/12029.html 作者:bone9 善心悦目的动效已然成为一个app的必备,作为设计师自然要跟随趋势学习.APP ...
- 利用微信提高APP下载的3个推广方式!
http://www.cocoachina.com/market/20150615/12149.html 走进移动互联网时代,各式各样App层出不穷,开发者们已经早一步走在了我们前面,为我们想到了一切 ...