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 => '' */ ...
随机推荐
- Mybatis中insert
<insert id="insert" parameterType="Currency"> INSERT INTO YZ_SECURITIES_CU ...
- 【Android】Scrollview 相关问题汇总
去除Scrollview 滑动边界渐变颜色 去掉滚动条,并将在滑动时,边界不会变成灰白 <horizontalscrollview android:overScrollMode="ne ...
- Python - 3.6 学习第一天
开始之前 基础示例 Python语法基础,python语法比较简单,采用缩紧方式. # print absolute value of a integer a = 100 if a >= 0: ...
- Swift - 触摸事件响应机制(UiView事件传递)
import UIKit class FatherView: UIView { override func hitTest(point: CGPoint, withEvent event: UIEve ...
- thinkphp---自动验证的问题
这段时间做一个项目:使用 thinkphp 做了一个自动验证,但是发现如果新增的时候,是能够进行自动验证的,但是在修改的修改的时候,会发现自动验证会失效. 验证的时候,模型是这样写的: protect ...
- 模拟退火算法A Star not a Tree?(poj2420)
http://write.blog.csdn.net/postedit A Star not a Tree? Time Limit: 1000MS Memory Limit: 65536K Tot ...
- 在github上参与开源项目日常流程
转载自:http://blog.csdn.net/five3/article/details/9307041 1. 注册帐号 打开https://github.com/,填写注册信息并提交. 2. 登 ...
- Air Raid---hdu1151（最小路径覆盖）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1151 最小路径覆盖 == 顶点数 - 最大匹配. #include<stdio.h> #i ...
- 洛谷P1156 垃圾陷阱 dp
正解:dp 解题报告: 这儿是传送门! 话说最近怎么神仙们都开始狂刷dp,,,感觉今天写了好多dp的题解的样子?(也就三四道其实× 然后这题,首先看到要么吃要么堆起来就会想到01背包趴?然后就考虑设方 ...
- Django restframwork获取列表详情
z哎Django restframwork中就有一个类可以获取列表的详情内容,只有两行代码就可以搞定,在浏览器测试是ok的.但是这样的接口给前端,前端点击详情然后会将models.表名.objects ...