vue.js指令v-model实现方法
原文链接：http://www.jb51.net/article/99097.htm
V-MODEL 是VUE 的一个指令，在input 控件上使用时，可以实现双向绑定。
通过看文档，发现他不过是一个语法糖。
实际是通过下面的代码来实现的：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue/vue.js"></script>
</head>
<body>
<div id="app-6">
<input :value="person.name" @input="person.name = $event.target.value">
<input :value="person.age" @input="person.age =$event.target.value">
{{person}}
</div>
<script type="text/javascript">
var app =new Vue({
el: '#app-6',
data:{
person:{name:"ray",age:19}
}
})
</script>
</body>
</html>
经测试：这里的：<input :value="person.name" @input="person.name = $event.target.value">如果data里没有对应的值，即使在这里写了value也是显示不出来的。
vue.js指令v-model实现方法的更多相关文章
- 第3章-Vue.js 指令扩展 和 todoList练习
一.学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二.todoList练习效果展示 2.1.效果图展 ...
- 第2章-Vue.js指令
一.学习目标 了解 什么 是 Vue.js 指令 理解 Vue.js 指令的 用途 掌握 Vue.js 指令的书写规范 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...
- vue.js指令总结
1.v-html 用于输出真正html,而不是纯文本. 2.v-text 输出纯文本. <!DOCTYPE html> <html lang="en"> & ...
- Vue.js父子通信之所有方法和数据共享
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue devtool插件安装后无法使用，提示“vue.js not detected”的解决方法
vue devtool下载 极简插件 github vue devtool安装 点击谷歌浏览器箭头所指图标-更多工具-扩展程序 ①:直接将后缀为crx的安装包拖进下图区域即可自动安装 ② ...
- vue.js使用更简单的方法制作带删除功能的tooolist
今天复习了下vue.js,先做了个基本版的todolist,做完后自己想加个删除本项的按钮.一开始做没啥头绪了,试了试无果,查了一把后发现网上的那些方法真的是麻烦,自己动手丰衣足食,自己最后换了思路试 ...
- vue.js 源代码学习笔记 ----- 工具方法 option
/* @flow */ import Vue from '../instance/index' import config from '../config' import { warn } from ...
- vue.js 源代码学习笔记 ----- 工具方法 env
/* @flow */ /* globals MutationObserver */ import { noop } from 'shared/util' // can we use __proto_ ...
- vue.js 源代码学习笔记 ----- 工具方法 share
/* @flow */ /** * Convert a value to a string that is actually rendered. { .. } [ .. ] 2 => '' */ ...
随机推荐
- 《C#高级编程》学习笔记------抗变和协变
1.协变和抗变 在.NET 4之前,泛型接口是不变的..NET 4通过协变和抗变为泛型接口和泛型委托添加了一个重要的扩展.协变和抗变指对参数和返回值的类型进行转换.例如,可以给一个需要Shape参数的 ...
- delphi中Case语法的使用方法
Case 语句If...Then…Else 语句适合选项较少的情况,如果有很多选项的话利用If 语句就比较麻烦,在这种情况下,Case 语句就容易多了.Case 语句的语法如下: case <表 ...
- LeetCode——Binary Tree Paths
Description: Given a binary tree, return all root-to-leaf paths. For example, given the following bi ...
- 图的建立(邻接矩阵)+深度优先遍历+广度优先遍历+Prim算法构造最小生成树(Java语言描述)
主要参考资料:数据结构(C语言版)严蔚敏 ,http://blog.chinaunix.net/uid-25324849-id-2182922.html 代码测试通过. package 图的建 ...
- Docker 使用指南 (五)—— Dockerfile 详解
版权声明:本文由田飞雨原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/97 来源:腾云阁 https://www.qclou ...
- 2015.10.9js(页面坐标)
关于js鼠标事件综合各大浏览器能获取到坐标的属性 1.page随滚动条变化(pageY会增加滚动条滚动的距离),兼容性:除IE6/7/8不支持外,其余浏览器均支持; 2.clientX/Y获取到的是触 ...
- tomcat配置JMX
最近看JDK的命令行工具,使用Java VisualVM和Jconsole工具都可以监控java程序的运行情况(包括CUP和内存等的使用情况,线程的运行状态等) 在Java VisualVM 工具里可 ...
- WCF(二) 使用配置文件实现WCF应用程序
服务三要素ABCA:Address 在哪里 (包含传输方式的信息)B:Binding 怎么实现(与地址的传输方式要匹配)C:Contract做什么(服务契约) namespace WCFService ...
- How many ways??---hdu2157（矩阵快速幂）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2157 题意:有一个有向图,含有n个节点,m条边,Q个询问,每个询问有 s,t,p,求 s 到 t ...
- 监听checkbox事件
<!DOCTYPE html> <html> <head> <title></title> </head> <script ...