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也是显示不出来的。

转载于:https://www.cnblogs.com/gavinyyb/p/6599113.html

vue.js指令v-model实现方法相关推荐

（9）vue.js 指令（1）
一.vue.js指令介绍指令的本质就是 HTML 自定义属性,Vue.js 的指令就是以 v- 开头的自定义属性.我们HTML元素非为固有属性和自定义属性,固有属性就是自己元素本身就有的,比如id, ...
vue.js html 属性赋值,vue.js input框之间赋值方法
vue.js input框之间赋值方法 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了vue.js input框之间赋值方法,编程之家小编 ...
Vue.js 指令v-for和v-if和v-show
文章目录 Vue指令之`v-for`和`key`属性代码演示 v-for循环普通数组 v-for循环对象数组 v-for循环对象 v-for迭代数字 v-for循环中key属性的使用 Vue指令之` ...
（11）vue.js 指令（3）
一.事件处理指令v-on • 用于进行元素的事件绑定.示例1: • Vue.js 还为 v-on 指令提供了简写方式.示例2:v-on的简介方式 • 事件程序代码较多时,可以在 methods 中设 ...
（10）vue.js 指令（2）
八.渲染指令-v-for v-for介绍:v-for指令用于遍历数据渲染结构,常用的数组与对象均可遍历. 示例1:渲染数组当中的数据,item是一个自己起的标识,in是固定的关键字,再···里,arr ...
作用于HTML元素的Vue.js指令
我在这里学习内置指令 v-model v-if v-show v-else v-for v-bind v-on v-model表单数据模型双向绑定 example: ① 表单文本输入框效果 <i ...
Vue.js 获取元素高度的方法【记录】
Vue.js获取下面div的height: <div ref="element"></div> 1.获取高度值:(内容高+padding+边框) let h ...
删除vue打包大小限制_压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)...
问题由于这次项目是在初学 Vue 之后的第一个正式项目,没有考虑到类似路由懒加载. 按需加载的问题 ,所以呢,也算是没经验. 到了这些天,项目写得差不多了,准备放到服务器测试,才发现这个问题. 优 ...
vue.js 源代码学习笔记 ----- 工具方法 lang
/* @flow */ // Object.freeze 使得这个对象不能增加属性, 修改属性, 这样就保证了这个对象在任何时候都是空的 export const emptyObject = Obje ...

vue.js指令v-model实现方法

vue.js指令v-model实现方法相关推荐

最新文章

热门文章