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 => '' */ ...
随机推荐
- PyQt4工具栏
工具栏 菜单对程序中的所有命令进行分组防治,而工具栏则提供了快速执行最常用命令的方法. #!/usr/bin/python # -*- coding:utf-8 -*- import sys from ...
- java高级---->Thread之Semaphore的使用
Semaphore也是一个线程同步的辅助类,可以维护当前访问自身的线程个数,并提供了同步机制.今天我们就学习一下Semaphore的用法. java中多线程Semaphore的使用 关于Semapho ...
- 以用户名注册来分析三种Action获取数据的方式
1.注入属性 直接注入属性: public String userName; public String getUserName() { return userName; } public void ...
- Weinre 远程调试移动端手机web页面
调试场景 1.调试页面在手机上.2.调试工具在PC的chrome3.手机跟pc要在同一个网络环境下,也就是都使用一个wifi 一.安装 Weinre 1.Weinre是基于nodejs实现的,所以使用 ...
- spring mvc的@Transactional注解
转自:https://www.cnblogs.com/yepei/p/4716112.html spring的@Transactional注解详细用法 概述 事务管理对于企业应用来说是至关重要的, ...
- java对象转化成String类型
在java项目的实际开发和应用中,常常需要用到将对象转为String这一基本功能.本文将对常用的转换方法进行一个总结.常用的方法有Object#toString(),(String)要转换的对象,St ...
- oneThink发生错误，获取当前执行的SQL语句！
echo D('AnswerInfoView')->getLastSql();die();
- python 10分钟入门pandas
本文是对pandas官方网站上<10 Minutes to pandas>的一个简单的翻译,原文在这里.这篇文章是对pandas的一个简单的介绍,详细的介绍请参考:Cookbook .习惯 ...
- ubuntu16.04下安装opencv3的viz模块
OPENCV3.0默认是不安装VIZ模块的,那么如何安装呢? 如果已经安装了Opencv,现在要增加VIZ模块,应该再安装一次就可以吧,我没试过,我是卸载了原来的,重新安装的 简单来说,就是要多安装一 ...
- Java 笔记20180123
在批量添加数据时候采用List或者Map或者SetSet<Student> students = new Set<Student>();// 客户端验证:js:服务器端验证:必 ...