Vue 数据的双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue-app">
<h1>双向数据绑定 /input / select /textarea</h1>
<label>姓名:</label>
<!-- <input type="text" @keyup.enter="logName"> -->
<input ref="msg" type="text" v-on:keyup="logName">
<input type="text" v-model="name">
<p>{{ name }}</p>
<label>年龄</label>
<input ref="age" type="text" v-on:keyup="logAge">
<span>{{ age }}</span>
</div>
<script src="app.js"></script>
</body>
</html>
数据双向绑定 HTML
new Vue({
el:'#vue-app',
data:{
name:'',
age:''
},
methods:{
logName:function(){
//console.log('你在输入名称');
// this.name=this.$refs.name.value;
console.log(this.$refs.msg.value)
},
logAge:function(){
// console.log('你在输入年龄');
this.age=this.$refs.age.value;
}
}
})
Vue.js
Vue 数据的双向绑定的更多相关文章
- Vue源码解析---数据的双向绑定
本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...
- vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...
- 组件的通信 ：provide / inject 对象进入后，就等于不用props，然后内部对象，直接复制可以接受数组，属性不能直接复制，可以用Object.assgin覆盖对象，或者Vue的set 双向绑定数据
组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...
- Vue框架之双向绑定事件
Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...
- 用ES6的class模仿Vue写一个双向绑定
原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...
- vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定
vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...
- JavaScript实现数据的双向绑定
接触到Angulr.js和Vue.js后,提到最多的就是双向绑定 下面将用JavaScript实现数据的双向绑定 <!DOCTYPE html> <html> <head ...
- 通过原生js实现数据的双向绑定
通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...
- 数据的双向绑定 Angular JS
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
随机推荐
- Android 深入浅出 - Android系统启动过程
Activity的类继承关系及跟踪Activity的启动 Android系统启动过程 https://study.163.com/course/courseLearn.htm?courseId=213 ...
- Idea使用Maven异常 --- Maven网络代理设置
在conf/setting.xml和m2/repository/setting.xml中加入: <proxies> <!-- proxy | Specification for on ...
- ShaderLab学习总结
转载 Unity ShaderLab学习总结 Why Bothers? 为什么已经有ShaderForge这种可视化Shader编辑器.为什么Asset Store已经有那么多炫酷的Shader组件可 ...
- 吴裕雄 27-MySQL 元数据
你可能想知道MySQL以下三种信息:查询结果信息: SELECT, UPDATE 或 DELETE语句影响的记录数.数据库和数据表的信息: 包含了数据库及数据表的结构信息.MySQL服务器信息: 包含 ...
- Java中this和super的用法和区别
super(参数):调用父类中的某一个构造函数(应该为构造函数中的第一条语句). this(参数):调用本类中另一种形式的构造函数(应该为构造函数中的第一条语句). this的实例: package ...
- Signed Distance Field Technique
[Distance Field Technique] 一种小纹理高清放大的技术. A distance field is generated from a high resolution image, ...
- Linux系统服务之inetd
[Linux系统服务之inetd] inetd的角色是作为Telnet和FTP等与网络服务器相关的进程的“超级服务器”.这是一个简单的道理:并不是全部的服务器进程(包括那些接受新的Telnet和FTP ...
- arachni安装使用
下载:http://www.arachni-scanner.com/download/#linux 解压到不是中文的目录下:tar -zxvf arachni-1.5.1-0.5.12-linux-i ...
- thymeleaf 在js中获取message信息或获取后台属性
<script th:inline="javascript"> /*<![CDATA[*/ [[#{message1}]] [[${abc}]] /*]]> ...
- PHP 用正则获取URL的根域名
function GetUrlRoot($url){ preg_match('/[\w][\w-]*\.(?:com\.cn|com|cn|co|net|org|gov|cc|biz|info)(\/ ...